Angular 11 项目assets文件夹下图片无法渲染加载该如何解决？

1. 检查base href配置 #

• 打开项目根目录index.html，确认<base href>标签的配置值：
  • 如果生产部署在域名子路径下（例如https://domain.com/sub-app/），需要把href改为对应子路径/sub-app/。绝对路径/assets/xxx会基于base href拼接，子路径部署时默认的/会定位到根域名，导致资源路径匹配错误
  • 如果项目开启了i18n多语言构建，每个语言包会生成独立子文件夹，需要对应调整base href为对应语言路径，例如/zh-CN/
  • 临时兼容测试可以改为<base href="./">，使用相对路径匹配当前部署路径

2. 检查模板引用写法 #

• 静态写死的img标签推荐直接写根路径，不需要相对组件路径：

  <!-- 正确写法 -->
  <img src="/assets/images/6684.png" alt="示例图">
  

• 如果是TS变量绑定路径，不要写相对组件的路径，直接写assets根路径：

  // order.component.ts
  public imgPath = 'assets/images/6684.png';
  

  <!-- order.component.html -->
  <img [src]="imgPath" alt="示例图">
  

3. 排查文件名大小写与特殊字符 #

• Angular生产构建对大小写敏感，确认实际文件、文件夹名称和引用路径完全一致：
  • 检查图片文件名是否为6684.png，不是6684.PNG、6684 .png（带空格）等
  • 检查存放图片的文件夹名称是否为小写的images，和引用路径的拼写完全匹配

4. 检查静态部署服务器配置 #

• 确认服务器的静态资源目录指向构建后的dist文件夹根目录
• 检查服务器是否有路径重写、防盗链规则拦截了png资源请求，SPA单页应用的路由重写规则需要排除静态资源后缀，以Nginx为例：

  参考配置片段：

  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
  

5. 排查缓存与构建产物问题 #

• 构建前先执行ng clean清除旧的构建缓存，再重新执行ng build --prod生成新的产物
• 部署后清空浏览器缓存，或者使用无痕模式测试，避免旧缓存导致404
• 打开浏览器控制台「网络」面板，查看实际请求的图片完整路径，确认是否出现路径拼接错误、前缀重复等问题

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