vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue报错Not allowed to load local resource

vue报错Not allowed to load local resource的解决办法

作者:影子落人间

这篇文章主要给大家介绍了关于vue报错Not allowed to load local resource的解决办法,这个错误是因为Vue不能加载本地资源的原因,需要的朋友可以参考下

问题描述

我在前后端分离项目中,在前端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

总结

以上就是vue报错Not allowed to load local resource的解决办法的详细内容,更多关于vue报错Not allowed to load local resource的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文