Angular如何加载默认assets文件夹之外的图片？

问题描述 #

• 项目文件夹目录结构：
  
• HTML 中图片引用代码：

<img class="img-fluid" src="../../ecommerce/assets/images/bannerimg.png" alt=" ">

• angular.json 已配置对应资源规则，配置内容：
  
• 访问时报错信息：
  
• 补充说明：存放在默认 assets/images 目录下的图片可以正常加载。

解决步骤 #

• 替换相对路径为根路径引用
  Angular 应用运行时的资源寻址基于站点根目录，和源码中组件文件的相对位置无关，将 img 标签的 src 属性修改为如下写法即可：

<img class="img-fluid" src="/ecommerce/assets/images/bannerimg.png" alt=" ">

• 确认配置生效
  检查 angular.json 中 assets 配置数组是否正确添加了自定义资源目录条目 "src/ecommerce/assets"，修改配置后必须重启 ng serve 命令，新配置才会生效。
• 排查路径拼写问题
  Angular 打包后对资源路径大小写敏感，需确认目录名、文件名的大小写和实际路径完全一致，避免拼写错误。

原理解释 #

默认 src/assets 目录下的资源可以正常加载，是因为 Angular 初始化项目时已经默认将该目录加入了 assets 配置，打包时会自动将该目录下的资源拷贝到输出目录的对应路径，新增的自定义资源目录需要手动添加到配置中才能被正确识别处理。

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