Angular项目如何访问src文件夹外img目录下的图片资源

核心问题说明 #

• 你配置的assets规则会将根目录img下的所有资源，打包后输出到构建产物的some-package文件夹下，HTML中写的源文件相对路径不会被Angular编译识别，自然找不到资源
• 图片引用路径和assets的输出配置不匹配，是触发404的直接原因

具体修改步骤 #

1. 调整angular.json配置（可选优化，也可保留原有配置） #

为了路径更直观，建议将assets配置修改为如下形式，注意补上默认的资源规则，避免原有assets下的资源失效：

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

如果你不想修改原有配置，可以跳过这一步，直接走下一步路径适配。

2. 修改HTML中的图片引用路径 #

不需要写多层相对路径，直接对应assets配置的输出路径引用即可：

• 如果你按上面的建议修改了assets配置，引用写法为：

<img src="/img/Romantic-Flowers.jpg" class="card-img-top" width="50px" height="300px" alt="...">

• 如果你保留了原有output: "/some-package/"的配置，引用写法为：

<img src="/some-package/Romantic-Flowers.jpg" class="card-img-top" width="50px" height="300px" alt="...">

3. 重启开发服务 #

修改angular.json后必须重启ng serve，新的配置才会生效。

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