vue报错Not allowed to load local resource的解决办法
更新时间：2023年07月24日 11:59:06 作者：影子落人间
这篇文章主要给大家介绍了关于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的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了封装一个更易用的Dialog组件过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-05-05
这篇文章主要介绍了vue菜单栏自适应折叠,我这里使用的是el-menu导航菜单，监听页面宽度的改变，来改变导航菜单的折叠和展开，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue中遇到的坑之变化检测问题（数组相关） ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了Vue+mui实现图片的本地缓存的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-05-05
vue2中使用echarts实现中国地图、在中国地图上标注坐标散点图的操作代码
这篇文章主要介绍了vue2中使用echarts实现中国地图、在中国地图上标注坐标散点图,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2024-05-05
vue-router是vue.js官方的路由插件,他和vue.js是深度集成的适合构建单页面应用,下面这篇文章主要给大家介绍了关于Vue router应用问题的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要为大家详细介绍了Vue3实现简易音乐播放器组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
本文主要介绍了element tree树形组件回显数据问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要给大家介绍了关于VUE+Canvas实现简单五子棋游戏的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了Vue.$set 失效的坑 问题发现及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-07-07
最新评论