Angular 11中如何将assets文件夹内图片绑定到游戏列表元素？

你的<img>标签src属性的写法有误，错误的引号嵌套和插值方式导致路径无法正确解析，以下是两种可行的修正方案：

方案1：使用字符串插值 #

直接在src的双引号内用{{}}插入图片文件名，不需要额外添加单引号：

<td><img src="assets/{{game.image}}"></td>

方案2：使用属性绑定（推荐） #

通过方括号[]绑定src属性，用模板表达式拼接完整路径，这种方式更符合Angular的属性绑定规范：

<td><img [src]="'assets/' + game.image"></td>

完整修正后的代码： #

<tr *ngFor="let game of games; let i = index"
    [class.active]="i == currentIndex"
    (click)="setActiveGame(game, i)">
  <td>{{game.gameId}}</td>
  <td>{{game.name}}</td>
  <td><img [src]="'assets/' + game.image"></td>
  <td>{{game.price}}</td>
  <td>{{game.releaseDate}}</td>
</tr>

额外说明： #

• 确认game.image的值是图片的完整文件名（例如zelda.png），且图片文件已放置在项目的src/assets目录下
• Angular默认会将assets目录纳入打包配置，无需额外修改angular.json即可正常访问该目录下的资源

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