Angular中assets子文件夹图片无法加载问题求助

这不是Angular的预期行为，是你的assets配置和模板中的文件路径不匹配导致的。

原因分析 #

当你在angular.json中配置"src/assets/images"作为assets项时，Angular会把这个文件夹下的所有内容直接复制到构建输出目录的根目录（比如dist/your-project/），而不是嵌套在assets/目录下。这时候模板里的assets/images/image-card.png路径就找不到文件了——因为实际文件路径是/images/image-card.png。

解决方法 #

有两种方式可以修复这个问题，同时支持按文件夹分类管理资源：

方法1：配置整个assets目录（推荐）

修改angular.json的assets配置，把整个src/assets目录加入：

"assets": [
  "src/favicon.ico",
  "src/assets"
],

这样Angular会完整复制src/assets目录及其所有子文件夹到输出目录，模板中的assets/images/image-card.png路径就能正确指向文件，同时你可以在assets下创建images、videos、docs等子文件夹分类管理资源，路径按assets/[folder]/[file]的方式引用即可。

方法2：单独配置子文件夹并调整访问路径

如果只想单独配置src/assets/images，需要把模板中的图片路径改为根路径下的images/：

<img src="/images/image-card.png" />

这种方式下，你也可以继续创建其他子文件夹（比如src/assets/videos），并在angular.json中添加对应的配置项：

"assets": [
  "src/favicon.ico",
  "src/assets/images",
  "src/assets/videos"
],

对应的视频文件路径就写成/videos/xxx.mp4。

关于分类管理 #

完全可以按文件夹分类管理不同类型的资源，只要保证：

• angular.json的assets配置包含对应的文件夹（要么配置整个src/assets，要么逐个添加子文件夹）
• 模板中的资源路径和构建后的实际文件位置一致

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