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>

您可以使用索引来实现：

Answer 2

这是因为您不能成角度地运行2个循环。因此，实际上您无法在可变照片中获得照片路径的价值。 但是，相反，您是在可变照片中获得可变位置的值。

您可以检查它是否打印照片的值

{{photo}}