脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue报错Not allowed to load local resource

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实现网页截图和截屏功能

    使用Vue实现网页截图和截屏功能

    网页截图与截屏功能在许多Web应用程序中都非常有用,Vue.js作为一个流行的JavaScript框架,提供了许多工具和库来简化网页截图和截屏的实现,本文将介绍如何使用Vue来实现一个网页截图和截屏功能的示例,包括使用html2canvas库和vue-cropper库,需要的朋友可以参考下
    2023-10-10
  • 理理Vue细节（推荐）

    理理Vue细节（推荐）

    这篇文章主要介绍了Vue细节，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue项目打包后怎样优雅的解决跨域

    vue项目打包后怎样优雅的解决跨域

    这篇文章主要介绍了vue项目打包后怎样优雅的解决跨域,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue2 自定义动态组件所遇到的问题

    vue2 自定义动态组件所遇到的问题

    这篇文章主要介绍了vue2 自定义 动态组件的实现方法,需要的朋友可以参考下
    2017-06-06
  • 手写实现Vue计算属性

    手写实现Vue计算属性

    这篇文章主要介绍了手写实现Vue计算属性，本文从一个简单的计算属性例子开始，一步步实现了计算属性。并且针对这个例子，详细分析了页面渲染时的整个代码执行逻辑，需要的小伙伴可以参考一下
    2022-08-08
  • 详解Vue3中Watch监听事件的使用

    详解Vue3中Watch监听事件的使用

    这篇文章主要为大家详细介绍了Vue3中Watch监听事件的使用的相关资料，文中的示例代码讲解详细，对我们学习Vue3有一定的帮助，需要的可以参考一下
    2023-02-02
  • vue2路由表中异步加载组件命名方式

    vue2路由表中异步加载组件命名方式

    这篇文章主要介绍了vue2路由表中异步加载组件命名方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • vue-cli创建项目ERROR in Conflict: Multiple assets emit different content to the same filename index.html问题的解决办法

    vue-cli创建项目ERROR in Conflict: Multiple assets emit dif

    最近vue/cli创建项目后出现了错误,下面这篇文章主要给大家介绍了关于vue-cli创建项目ERROR in Conflict: Multiple assets emit different content to the same filename index.html问题的解决办法,需要的朋友可以参考下
    2023-02-02
  • vue+elementUI封装一个根据后端变化的动态table(完整代码)

    vue+elementUI封装一个根据后端变化的动态table(完整代码)

    这篇文章主要介绍了vue+elementUI,封装一个根据后端变化的动态table,实现了自动生成和插槽两个方式，主要把el-table 和el-pagination封装在一起，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-08-08
  • vue卡片式点击切换图片组件使用详解

    vue卡片式点击切换图片组件使用详解

    这篇文章主要为大家详细介绍了vue卡片式点击切换图片组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06

最新评论