html - Ionic 4 动态照片网址无效 - 未显示图像

Question

在我的应用程序中，我这样做:

<ion-col *ngFor ="let place of intentList, let photo of photoList">
        <ion-card>
          <ion-card-content>
          <img class="img" src = "{{photo}}" (click)="clickedImage(place.intent)">
          <div>{{place.val}}</div>
          </ion-card-content>
        </ion-card>
      </ion-col>

数组 photoList 包含具有不同照片 url 的字符串。这是数组:

this.photoList = ["./assets/images/001-breakfast.png", "./assets/images/002-brunch.png", "./assets/images/003-sandwich.png",
      "./assets/images/004-food.png", "./assets/images/005-dinner.png", "./assets/images/006-cake.png", "./assets/images/007-cocktail.png"]

但这就是我的应用程序的样子:

Answer 1

<ion-col *ngFor ="let place of intentList; let i=index;">
        <ion-card>
          <ion-card-content>
          <img class="img" src = "{{photo[i]}}" (click)="clickedImage(place.intent)">
          <div>{{place.val}}</div>
          </ion-card-content>
        </ion-card>
      </ion-col>

你可以使用索引来实现它: