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的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue 公共列表选择组件,引用Vant-UI的样式方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了VUE中的打包删除文件、图片的HASH码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
这篇文章主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家详细介绍了vue src动态加载请求获取图片的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
在有些情况下需要使用不同的语言来完成一个项目,因此就有可能出现不同语言的程序之间的相互调用,下面这篇文章主要给大家介绍了关于vue.js调用python脚本并给脚本传数据的相关资料,需要的朋友可以参考下2024-03-03
在浏览器上下滚动的时候,如何距离顶部的距离大于78px,吸顶显示,小于78px则隐藏,所以本文小编给大家介绍了Vue设置导航吸顶的详细教程,文中有相关的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了前端设置cookie之vue-cookies使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了Vue中的transition封装组件的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
基于 vue-skeleton-webpack-plugin 的骨架屏实战
这篇文章主要介绍了基于 vue-skeleton-webpack-plugin 的骨架屏实战，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了如何使用Vite安装和启动Vue3项目,并推荐了一些常用的第三方库,如js-tool-big-box、less或sass预处理器、axios请求库以及Element Plus UI库,需要的朋友可以参考下2024-12-12
最新评论