How to use ion-img in ionic 3 app?
我正在构建一个ionic 3应用程序，该应用程序在不同页面中包含很多图像。我尝试使用默认的HTML图像标签进行此操作。但是使用该方法会导致该应用程序的使用滞后，还会遇到很多类似的问题屏幕旋转时图像大小会发生变化，有时会导致图像重叠，图像加载难看。
我查阅了Ionic文档，发现最好使用ion img标签来消除这些问题。通过这种延迟加载，可以实现平滑滚动。我已经在使用虚拟滚动，但是不是将ion-img用于图像，而是使用img标签来加载图像。
当我按照离子文档中的说明使用ion-img时，没有图像加载，仅显示空白。这是代码，
HTML：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <ion-header> <ion-navbar color="dark"> <button ion-button clear class="menubutton"> <ion-icon name="menu" (click)="presentActionSheetCategory()"></ion-icon> </button> <ion-title><button ion-button clear (click)="goAbout()">appname</button></ion-title> </ion-navbar> </ion-header> <ion-content class="card-background-page"> <ion-list [virtualScroll]="categories"> <ion-item *virtualItem="let category" class="itemcss"> <ion-card collection-repeat="category in categories" (click)="category.golink()" class="wallcard"> <ion-img class='homecardimage' collection-repeat="category in categories" [src]="category.Url"></ion-img> {{category.Name}} </ion-card> </ion-item> </ion-list> </ion-content> |
如何在Ionic 3中正确实现ion-img标签？
谢谢。
更新：
此行为似乎是
旧反馈
您做错了。您可以尝试如下所示。
1 2 3 4 5 6 7 8 | <ion-list [virtualScroll]="categories"> <ion-item *virtualItem="let category" class="itemcss"> <ion-card (click)="category.golink()" class="wallcard"> <ion-img class='homecardimage' [src]="category.Url"></ion-img> {{category.Name}} </ion-card> </ion-item> </ion-list> |
1 | <ion-img class='homecardimage' collection-repeat="category in categories" src="category.Url"></ion-img> |