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

【问题标题】：Ionic3 ion-img do not show images with ng-forIonic3 ion-img 不显示带有 ng-for 的图像
【发布时间】：2017-11-17 20:57:20
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

什么不起作用？
不显示图片
那么您做了什么来尝试调试问题 - 您是否在变量 company.images 上得到任何信息？如果您提供更多详细信息，您将获得更多帮助。
不，没有错误。
我已经检查过在控制台中显示没有错误。我也尝试使用lazyload，然后它渲染了图像，但它没有根据css样式调整图像大小

标签： angular typescript ionic-framework ionic3

【解决方案1】：

这里需要使用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>

【讨论】：

仍然不使用属性绑定渲染图像
我已经检查过在控制台中显示没有错误。我也尝试使用lazyload，然后它渲染了图像，但它没有根据css样式调整图像大小
使用[ngStyle]="myStyles"。

【解决方案2】：

我发现解决方案使用“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>

【讨论】：

在修改你的代码之前，谷歌ion-img vs img并确保你知道使用ion-img和img标签之间的实际区别。