【SpringBoot】本地图片无法在前端显示，配置虚拟路径解决浏览器报错：Not allowed to load local resource

环境：

项目依托于springboot
前端用element-ui

错误状况描述：

下图是发生问题的类所在项目中的位置：

下面的代码是发生问题的类里的一段代码：

    @Value("F:/housesfiles/")
    String filesPath;

    @RequestMapping("/insert")
    public Map insert(Houses house,MultipartFile housePic) throws Exception, IOException {
        Map map=new HashMap();
        //createTime  生成当前的系统时间
        SimpleDateFormat s=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String createTime = s.format(new Date());
        house.setCreateTime(createTime);
        //houseState  新添加肯定是在正常状态  直接设置默认值0
        house.setHouseState(0);

        if(!housePic.isEmpty()) {
            //文件上传
            //获取源文件名 
            String filename = housePic.getOriginalFilename();
            //获取后缀
            String zhui=filename.substring(filename.lastIndexOf("."));
            //给从前端接收到的图片重命名，将名字存到数据库
            String newFileName="h_"+System.currentTimeMillis()+zhui;
            String filesPath="F:/housesfiles/";
            File file=new File(filesPath,newFileName);
            housePic.transferTo(file);
            house.setPic(newFileName);
        }
        housesService.insert(house);
        map.put("state", "success");
        return map;
    }

解决方法：

第一步:

• 把保存从前端收到的图片的文件夹移到前端项目文件夹下，
  也就是把路径F:/housesfiles/变为F:/house/housesweb/housesfiles，
  改变后的位置如下图所示。

第二步:
创建一个类，进行访问路径映射。

在类中写如下代码：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MyConfig implements WebMvcConfigurer {
    /*
     *addResourceHandler:访问映射路径，随便写一个
     *addResourceLocations:资源绝对路径，就是那个修改后的保存图片的文件夹的位置
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/housesfiles/**").addResourceLocations("file:F:/house/housesweb/housesfiles");

    }
}

第三步:

• 记得把这里的路径也改了！

@Autowired
    HousesService housesService;
    @Value("F:/house/housesweb/housesfiles")
    String filesPath;

    @RequestMapping("/insert")
    public Map insert(Houses house,MultipartFile housePic) throws Exception, IOException {
        Map map=new HashMap();
        //createTime  生成当前的系统时间
        SimpleDateFormat s=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String createTime = s.format(new Date());
        house.setCreateTime(createTime);
        //houseState  新添加肯定是在正常状态  直接设置默认值0
    house.setHouseState(0);

        if(!housePic.isEmpty()) {
            //文件上传
            //获取源文件名   1.jpg   abc.gif
            String filename = housePic.getOriginalFilename();
            //获取后缀
            String zhui=filename.substring(filename.lastIndexOf("."));
            String newFileName="h_"+System.currentTimeMillis()+zhui;
            String filesPath="F:/house/housesweb/housesfiles";
            File file=new File(filesPath,newFileName);
            housePic.transferTo(file);
            house.setPic(newFileName);
        }
        housesService.insert(house);
        map.put("state", "success");
        System.out.println(map);
        return map;
    }

第四步：

• 前端里的路径改为你在addResourceHandler:访问映射路径里写的那个，
• 就是下图这个！

这个{fileurl}{scope.row.pic}是拼接访问映射路径+图片名称，通过这个去找图片!

<el-table-column prop="hpic" label="图片" width="80">
				<template slot-scope="scope">
					<el-avatar :src="`${fileurl}${scope.row.pic}`"></el-avatar>
				</template>
			</el-table-column>