解决vue报错Not allowed to load local resource

最新推荐文章于 2025-05-17 19:43:47 发布

影子落人间

最新推荐文章于 2025-05-17 19:43:47 发布

阅读量6.8k

点赞数 16

CC 4.0 BY-SA版权

分类专栏：前端bug 文章标签： vue.js 前端 java

本文链接：https://blog.csdn.net/qq_50801874/article/details/128395763

前端bug 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在前后端分离项目中，Vue前端因浏览器安全限制无法直接使用绝对路径加载本地图片的问题。解决方法是通过配置Spring Boot的WebMvcConfigurer接口，设置资源映射，将本地图片路径映射为虚拟路径。配置完成后，可以使用类似'http://localhost:8201/doctor/qq.jpg'的虚拟路径来访问原本位于'E:/GraduationDesign/manage/hospital/src/assets/picture/'的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

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

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

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

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

解决方法

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

addResourceHandlers 方法。

@Configuration
public class PictureConversionConfig implements WebMvcConfigurer {
    @Override
    public 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