在Angular中动态显示图像的问题答案

【问题标题】：Problem with Showing dynamically an image in Angular在Angular中动态显示图像的问题
【发布时间】：2022-01-20 23:25:56
【问题描述】：

所以我有一个医生列表，我想为列表中的每个医生显示相应的图像。医生有一个 ID，所以我尝试在 ng-init 上为图像创建路径，但它仍然不起作用。有人可以帮我吗？这是代码。我的图像存储在 assets/img 文件夹中，每个医生的相应图像都与医生的 id 匹配（例如：id 为 1 的医生 1 具有图像“1.jpg”等。另外，是否有有更简单的方法吗？谢谢！

<li *ngFor="let doctor of doctors">
      <div class="row">
        <div class="col-4">
          <div ng-init="ImgPath ='assets/img/' + doctor.doctorId +'.jpg"></div>
          <img ng-src="{{ImgPath}" alt="" />
        </div>

(...)

【问题讨论】：

你在这里使用什么版本的 Angular？
看起来您在这里将 AngularJS 与 Angular 混为一谈。 *ngFor 是 Angular (2.x - 13.x) 中的特殊指令，而 ng-init 和 ng-src 是 AngularJS (1.x) 中使用的指令。虽然听起来很相似，但它们在实现上是非常不同的框架，并且不共享任何代码库。
哦，好吧。你知道解决这个问题的方法吗？我应该如何链接它们？
我正在使用 Angular 13

标签： angular list image ng-init

【解决方案1】：

超级简单！你只能使用这个：

<img src="assets/img/{{doctor.doctorId}}.jpg"/>

或者你可以将它绑定到 .ts 文件中

html:

<img [src]="urlImage(doctor)"/>

ts：

urlImage(doctor) {
  return `assets/img/${doctor.doctorId}.jpg`;
}

ng-init 和 ng-src 是 AngularJS 的指令！ 不要在 Angular 中使用它>2

【讨论】：