Ionic 4 动态照片 url 不工作 - 没有显示图像

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

这是因为您不能运行在 angular 中循环 2 次。所以你实际上没有在变量照片中获得照片路径的值。但是你得到的是变量 photo 中变量 place 的值。

打印photo的值可以查看

{{photo}}

Answer 2

<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>

你可以使用索引实现它：

Ionic 4 动态照片 url 不工作 - 没有显示图像

Ionic 4 dynamic photo url isn't working - no image shown

html

ionic-framework

ionic4