Ionic3 ion-img不显示带有ng-for的图像

use*_*398 1 typescript ionic-framework ionic3 angular

我正在尝试使用ion-img使用循环显示动态图像,但是它不起作用。

<ion-item no-lines no-padding *ngFor="let company of shortedDistanceArray">
    <div>
        <ion-img style="width: 15vh;height: 12vh;" src={{company.images}}"></ion-img>
    </div>
</ion-item>
Run Code Online (Sandbox Code Playgroud)

Sam*_*ath 5

在这里您需要使用property binding如下所示。总是尽量避免string interpolation

<ion-item no-lines no-padding *ngFor="let company of shortedDistanceArray">
    <div>
        <img style="width: 15vh;height: 12vh;" [src]="company.images"></img>
    </div>
</ion-item>
Run Code Online (Sandbox Code Playgroud)


use*_*398 5

我发现解决方案使用“img”标签而不是“ion-img”

<ion-item no-lines no-padding *ngFor="let company of shortedDistanceArray">
    <div>
        <img style="width: 15vh;height: 12vh;" src={{company.images}}" />
    </div>
</ion-item>
Run Code Online (Sandbox Code Playgroud)

  • 在修改代码之前,请搜索“ion-img vs img”,并确保您了解使用“ion-img”和“img”标签之间的实际区别。 (2认同)