Angular项目Assets目录图片无法加载（404请求错误）求助

问题场景 #

• 图片本地路径：src/assets/images/test.png
• 主组件中使用的图片标签：

  <img src="assets/images/test.png"/>
  

• angular.json 已配置资源目录：

  "options": {
     ...
     "assets": [
        "src/assets"
     ],
     ...
  }
  

• 错误现象：启动项目后控制台输出 GET https://localhost:44370/assets/images/test.png 错误，图片显示破损，直接访问该URL无法查看，将图片移至组件目录后问题依旧。
• 环境版本：

  Angular CLI: 10.0.4
  Node: 12.22.12
  OS: win32 x64
  
  Angular:                   Version
  ------------------------------------------------------
  @angular-devkit/architect    0.1000.4
  @angular-devkit/core         10.0.4
  @angular-devkit/schematics   10.0.4
  @schematics/angular          10.0.4
  @schematics/update           0.1000.4
  rxjs                         6.5.5
  

排查与解决步骤 #

1. 验证资源构建输出 #

打开项目构建后的 dist（或 dist/项目名称）目录，确认 assets/images/test.png 是否存在。若缺失，执行以下操作：

• 清理构建缓存：

  ng clean
  

• 重新构建项目：

  ng build
  

再次检查 dist 目录是否出现目标图片。

2. 修正图片路径写法 #

Angular 中推荐使用相对路径或属性绑定语法避免路径解析问题：

• 相对路径写法（以主组件在 src/app/app.component.html 为例）：

  <img src="../assets/images/test.png"/>
  

• 属性绑定写法：

  <img [src]="'assets/images/test.png'"/>
  

• 借助 require 确保 webpack 正确解析：

  <img [src]="require('../assets/images/test.png')"/>
  

3. 优化 angular.json 资源配置 #

确保资源配置无格式错误，多项目架构下需修改当前项目的配置节点，可尝试更明确的配置规则：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "src/assets/",
    "output": "/assets/"
  }
]

4. 清理缓存并重启服务 #

• 终止当前 ng serve 进程，重新启动开发服务器：

  ng serve
  

• 浏览器按 Ctrl+Shift+R（Windows/Linux）或 Cmd+Shift+R（Mac）强制刷新，清除页面缓存。

5. 检查文件细节 #

• 确认文件名与代码中路径的大小写完全一致（Windows 系统虽不区分大小写，但构建工具可能因大小写差异导致资源无法匹配）。
• 检查图片文件是否被系统锁定、权限是否正常，确保文件可正常读取。

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