Angular中如何为*ngFor循环生成的每个按钮添加不同图片

要给每个循环生成的按钮绑定不同图片，核心思路是让循环的每个数据项携带对应的图片路径信息，再通过Angular的属性绑定动态渲染图片，具体步骤如下：

1. 更新你的数据数组结构 #

首先确保myItems数组中的每一个对象，都包含一个存储图片路径的属性（比如叫imgUrl，你可以自定义名称）。举个组件里的示例代码：

// 组件.ts文件中的数据定义
myItems = [
  { id: 1, imgUrl: '../../assets/img/flower.png' },
  { id: 2, imgUrl: '../../assets/img/sun.png' },
  { id: 3, imgUrl: '../../assets/img/leaf.png' },
  { id: 4, imgUrl: '../../assets/img/water.png' }
];

如果你的图片路径是后端接口返回的，或者只需要拼接固定前缀+文件名，也可以改成这样：

myItems = [
  { id: 1, imgName: 'flower.png' },
  { id: 2, imgName: 'sun.png' },
  // ...其他项
];

2. 在模板中动态绑定图片路径 #

修改你的HTML模板，把img标签的src属性通过方括号绑定到当前循环项的图片属性上：

情况1：直接使用完整路径 #

<div *ngFor="let item of myItems"> 
  <button class="close-image">
    <!-- 用[src]做属性绑定，Angular会解析item.imgUrl的实际值 -->
    <img [src]="item.imgUrl" alt="按钮图标"> 
    <span></span> 
  </button> 
</div>

情况2：动态拼接路径 #

如果你的数据只存了文件名，需要拼接固定前缀，可以这么写：

<div *ngFor="let item of myItems"> 
  <button class="close-image">
    <img [src]="'../../assets/img/' + item.imgName" alt="按钮图标"> 
    <span></span> 
  </button> 
</div>

小提示 #

• 循环变量名建议用小驼峰（比如item），而不是大写开头的Items，更符合Angular的编码规范；
• 记得给img标签加上alt属性，提升页面可访问性；
• 如果图片加载失败，可以考虑添加默认图的逻辑，比如用(error)事件绑定：

  <img [src]="item.imgUrl" alt="按钮图标" (error)="$event.target.src='../../assets/img/default.png'">
  

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