解决vue报错Not allowed to load local resource

问题描述

我在前后端分离项目中，在前端vue里面标签中通过绝对路径访问本地图片，在加载图片的

时候会报出Not allowed to load local resource:，这个问题我也进行了相关的搜索，出现这个问题

的原因是因为浏览器出于安全因素，禁止通过绝对路径访问图片，需要通过虚拟路径进行访问，下

面我会简单清楚的说明解决的方法。

解决方法

通过创建一个配置类，配置类去实现WebMvcConfigurer 接口，重写里面的

addResourceHandlers方法。

@Configurationpublic class PictureConversionConfig implements WebMvcConfigurer {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) { /** * 资源映射路径 * addResourceHandler：访问映射路径 * addResourceLocations：资源绝对路径*/registry.addResourceHandler("/doctor/**").addResourceLocations("file:///E:/GraduationDesign/manage/hospital/src/assets/picture/");}}

第一个 addResourceHandler 方法里面填写你想要设置的虚拟路径，下面

addResourceLocations 方法填写资源的绝对路径。配置完成后，虚拟路径为

http://localhost:配置类端口号/doctor/图片名称。

比如上面绝对路径为E:/GraduationDesign/manage/hospital/src/assets/picture/，而图片整体

路径为E:/GraduationDesign/manage/hospital/src/assets/picture/qq.jpg，则这里的虚拟路径

为http://localhost:8201/doctor/qq.jpg