Ionic+Angular如何在HTML的img src属性中正确访问动态对象属性值

问题原因 #

直接写src="item.icon"时，Angular会把引号内的内容当成普通静态字符串处理，不会解析为组件类中的变量，因此实际请求的路径就是item.icon本身，而非你预期的 assets 路径。

解决方法 #

有两种正确的绑定动态属性的写法：

• 使用Angular属性绑定语法（推荐）
  给src属性加上方括号，标记为动态绑定，引号内的内容会被解析为TS表达式：

<img [src]="item.icon" class="sidebar__content custom__icon" alt="">

• 使用插值表达式
  用双大括号包裹变量，也可以实现动态值注入：

<img src="{{item.icon}}" class="sidebar__content custom__icon" alt="">

修改后完整的HTML代码示例：

<li *ngFor="let item of options" class="sidebar__content" [ngClass]="{ 'active' : item === selectedMenuItem }">
  <button class="btn" (click)="selectedMenuItem = item">
    <img [src]="item.icon" class="sidebar__content custom__icon" alt="">
  </button>
</li>

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