如何用AngularJS和Spring从本地文件夹获取图片并解决加载错误

这个问题我之前也碰到过，本质是浏览器的安全限制在搞鬼——浏览器为了防止恶意网站窃取本地文件，绝对不允许前端直接通过file://协议加载本地资源。下面给你两个靠谱的解决思路，都是通过后端中转来绕过这个限制：

方案一：通过Spring MVC接口中转图片内容 #

核心思路是让Spring后端读取本地图片文件，再把文件内容返回给前端，前端通过请求后端接口来获取图片，而不是直接访问本地路径。

1. 编写Spring Controller接口
   创建一个GET接口，接收图片的路径参数，读取本地文件并输出到响应中：

   @GetMapping("/api/images/{dir1}/{dir2}/{fileName}")
   public void serveImage(@PathVariable String dir1, 
                          @PathVariable String dir2, 
                          @PathVariable String fileName, 
                          HttpServletResponse response) throws IOException {
       // 拼接本地图片的完整路径
       String fullPath = "D:/RentdUpload/Images/" + dir1 + "/" + dir2 + "/" + fileName;
       File imageFile = new File(fullPath);
       
       // 校验文件是否存在
       if (!imageFile.exists()) {
           response.setStatus(HttpServletResponse.SC_NOT_FOUND);
           return;
       }
       
       // 设置响应头，根据图片类型调整Content-Type（比如png用image/png）
       response.setContentType("image/jpeg");
       response.setContentLength((int) imageFile.length());
       
       // 读取文件并输出到响应流
       try (InputStream inputStream = new FileInputStream(imageFile);
            OutputStream outputStream = response.getOutputStream()) {
           byte[] buffer = new byte[1024];
           int bytesRead;
           while ((bytesRead = inputStream.read(buffer)) != -1) {
               outputStream.write(buffer, 0, bytesRead);
           }
       }
   }
   

2. 在AngularJS中调用接口加载图片
   用ng-src绑定后端接口的URL，替换对应的路径参数即可：

   <img ng-src="/api/images/{{imageDir1}}/{{imageDir2}}/{{imageFileName}}" alt="Vehicle Image">
   

方案二：配置Spring静态资源映射直接访问本地目录 #

如果你的图片存储目录是固定的，可以把这个目录配置为Spring的静态资源目录，这样Spring会自动把该目录下的文件当作静态资源处理，前端直接通过URL就能访问。

1. 配置静态资源路径
   如果是Spring Boot项目，在application.properties（或application.yml）中添加配置：

   # 映射本地图片目录到Spring的静态资源路径，保留原有的classpath:/static/避免影响其他静态资源
   spring.web.resources.static-locations=file:D:/RentdUpload/Images/,classpath:/static/
   

2. 前端直接访问图片URL
   此时前端可以直接通过图片的相对路径访问，比如你的图片在D:/RentdUpload/Images/2/5/68_xc90(3).jpg，对应的URL就是/2/5/68_xc90(3).jpg，AngularJS中这样写：

   <img ng-src="/{{imageDir1}}/{{imageDir2}}/{{imageFileName}}" alt="Vehicle Image">
   

注意事项 #

• 确保Spring后端进程有读取本地图片目录的权限（比如Windows下的文件访问权限、Linux下的用户组权限）。
• 生产环境中，更推荐用专门的静态资源服务器（比如Nginx）来托管图片，或者使用云存储服务，性能和安全性会更好。
• 绝对不要尝试修改浏览器的安全设置来允许file://访问，这会带来严重的安全风险。

内容的提问来源于stack exchange，提问作者Santhosh M