在我的应用程序中,我这样做:
<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"]
最佳答案
<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>
你可以使用索引来实现它:
关于html - Ionic 4 动态照片网址无效 - 未显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54706786/