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

2023-09-01 05:26| 来源: 网络整理| 查看: 265

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代码

在这里插入图片描述

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

在这里插入图片描述好了结束！！至于部署到线上貌似就。。。。。

【本文地址】

公司简介

联系我们

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

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