Vue 列表 显示后台本地图片 Not allowed to load local resource: file:///D:/image/1.png

vue前端我是这么写的

然后就出现这个问题

如果页面在服务器上，浏览器出于安全考虑是不允许html访问本地文件的。不会允许浏览器打开file://开头的本地图片的。

百度了好多资料 基本都类似 说要修改tomcat的配置文件 可是问题来了 我用的springboot 然而找了许久 也没得到答案呀！！自己琢磨了好久 综合所有的资料
解决办法如下：

第一步 后端配置一个类

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.*;

@Configuration
public class InterceptorConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
             
        registry.addResourceHandler("/image/**").addResourceLocations("file:/D:/image/");
    }

}

这个主要是设置虚拟路径 这样就直接映射到自己本地的图片路径
例如：http://localhost:8080/ipfsemc/image/1.png 就会映射到 /D:/image/1.png

第二部：前端vue代码

用谷歌检查图片 请求的路径是否是自己想要的

好了 结束！！至于部署到线上貌似就。。。。。