在Angular中使用TypeScript变量设置img的src属性不生效如何解决

解决方案 #

按以下优先级排查修正即可解决问题：

1. 修正属性绑定写法
   Angular动态绑定DOM属性需要使用官方的属性绑定语法，直接用原生src加插值的写法会导致浏览器在变量解析完成前就尝试请求{{category.icon}}这个无效路径，触发404。同时模板内访问组件属性不需要加this.前缀，修正后的代码如下：

<ng-container *ngFor="let category of categories">
   {{category.name}}  
   <img [src]="category.icon" alt="{{category.name}}">               
</ng-container>

2. 补全图标路径后缀
   你提供的数组示例中，第一条分类的icon值为assets/images/test1，缺少.png/.jpg等图片后缀名，浏览器无法识别该资源为图片，需要补充对应后缀。
3. 确认assets资源配置
   检查angular.json中对应项目的build配置下的assets数组，确保已经包含src/assets路径，默认配置参考如下，修改后需要重启项目生效：

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

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