Angular项目中img标签加载图片出现404错误求助

问题原因 #

Angular项目构建后，src目录不会被打包到最终输出目录（通常为dist）。你写的/src/assets/2.png路径在浏览器中会请求服务器根目录下的src/assets文件夹，但该路径实际不存在，因此返回404。VS Code能定位到文件是因为它基于本地项目目录解析，和浏览器的请求路径逻辑不同。

解决步骤 #

• 修正图片路径：去掉src前缀，使用相对于输出目录的路径，代码修改为：

  <div class="logo">
    <img src="/assets/2.png" alt="Logo" style="height: 100px; width: 100px">
  </div>
  

  若header组件不在项目根目录（比如在app/components/header），也可使用相对路径：

  <img src="../../assets/2.png" alt="Logo">
  

• 确认资源配置：打开angular.json文件，检查assets数组是否包含src/assets，确保构建时会将assets文件夹复制到输出目录：

  "architect": {
    "build": {
      "options": {
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        // 其他配置...
      }
    }
  }
  

• 清理缓存并重启服务：运行以下命令清除缓存后重启开发服务器：

  ng cache clean
  ng serve
  

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