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





















，则这里的虚拟路径

为