本人使用的是前后端分离的项目 React+SpringBoot,想前台访问本地的图片但是却显示这个错,(mac电脑)
这个地址是直接存在了数据库里,然后前端拿到的。
这个地方我犯了个致命的错误,浏览器是不能直接访问本地资源的,也是出于安全考虑,如果浏览器可以直接访问本地的话,那也是一件很可怕的事情。
所以:需要使用虚拟路径进行映射,在后端加映射路径的代码。
1. addResourceHandler代表你要访问的路径,addResourceLocations代表你的图片真实存在的路径,意思就是:image代替了/Users/yuan/workspace-idea/images/的路径
1 @Configuration 2 public class WebConfig implements WebMvcConfigurer { 3 4 @Override 5 public void addResourceHandlers(ResourceHandlerRegistry registry) { 6 /** 7 * 资源映射路径 8 * addResourceHandler:访问映射路径 9 * addResourceLocations:资源绝对路径 10 */ registry.addResourceHandler("/image/**").addResourceLocations("file:/Users/yuan/workspace-idea/images/"); 11 } 12 13 }
2.很多网上的教程一般就讲到这里,但是具体的访问路径却没说,所以最终访问图片的虚拟路径是:http://localhost:8080/video/image/u1.jpg
3.http://localhost:8080:输入你自己的ip地址和端口,video:是我自己配置的访问路径(没配置就不用写)
这样就大功告成啦!希望可以解决你的问题~