Angular-cli中访问本地文件夹图片出现404错误的解决方法

你的问题根源在于Angular作为单页应用，浏览器会将你设置的本地路径当成相对于Angular开发服务器（localhost:4200）的URL来请求，而不是直接访问你的本地文件系统，所以才会出现404错误。下面是几种可行的解决方案：

方案1：通过后端API提供图片访问（推荐生产环境使用） #

这是最规范的做法，因为生产环境下你不可能直接暴露本地文件系统路径。步骤如下：

1. 在后端添加一个专门的接口，用于根据文件名返回图片内容。比如写一个GET接口/api/images/{filename}，这个接口的逻辑是：
   • 接收文件名参数
   • 读取你存储图片的本地文件夹（比如/home/aartek/Desktop/images/）中的对应文件
   • 将图片以流的形式返回给前端，同时设置正确的Content-Type（比如image/jpeg、image/png等）
2. 修改Angular组件中的getDataById方法，将url指向这个API接口：

   getDataById(profileId: any) {
     this.user.getDataById(profileId).subscribe((response: any) => {
       this.data = response;
       // 指向后端图片接口
       this.url = `/api/images/${this.data.profileImage}`;
       console.log(this.url);
     })
   }
   

这样前端请求这个API时，后端会把对应的图片返回，浏览器就能正常显示了。

方案2：将图片存储到Angular的assets目录（适合开发阶段快速测试） #

如果只是开发阶段想快速验证，你可以把图片存储到Angular项目的assets目录下（比如创建assets/images子目录）：

1. 修改后端的存储路径，把图片写入到Angular项目的assets/images文件夹中（注意路径要对应你的项目位置，比如/your-angular-project/src/assets/images/）
2. 修改Angular组件中的url为相对路径：

   getDataById(profileId: any) {
     this.user.getDataById(profileId).subscribe((response: any) => {
       this.data = response;
       // 使用assets目录的相对路径
       this.url = `/assets/images/${this.data.profileImage}`;
       console.log(this.url);
     })
   }
   

另外需要注意：如果是动态生成的图片（后端实时写入），你需要在angular.json中配置让Angular CLI监视这个目录，避免每次新增图片都要重启开发服务器。在angular.json的architect -> build -> options -> assets数组中添加：

{
  "glob": "**/*",
  "input": "src/assets/images",
  "output": "assets/images"
}

为什么直接用本地路径不行？ #

你之前设置的this.url ="/home/aartek/Desktop/images"+this.data.profileImage;，浏览器会把它解析成http://localhost:4200/home/aartek/Desktop/imagesMoon_merged_small.jpg，而Angular开发服务器并没有暴露你本地的/home/aartek/Desktop/images目录，自然会返回404。另外，即使你用file:///home/aartek/Desktop/imagesMoon_merged_small.jpg这种格式，浏览器出于安全限制，也会阻止网页访问本地文件系统（除非是Electron这类桌面应用场景），所以这种方式不推荐。

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