vuex报错（解决vue报错Not allowed to load local resource）

问题描述

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



















，则这里的虚拟路径

为