I am currently developing an app using Ionic 3 that includes a large number of images spread across different pages. Initially, I used the default HTML image tag to display these images. However, this approach caused lag in the app's performance and also resulted in various issues such as images resizing when the screen is rotated, leading to overlaps and unattractive loading of images.
After consulting the Ionic documentation, I discovered that using the ion img tag is a better solution to address these problems. This tag offers features like lazy loading and smooth scrolling which can enhance the user experience. Although I am already implementing virtual scroll, I have been using the img tag instead of ion-img for displaying images.
Unfortunately, upon trying to implement ion-img as recommended in the Ionic documentation, I encountered an issue where images were not loading at all, leaving empty spaces on the page. Below is a snippet of the code:
HTML:
<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>
<div collection-repeat="category in categories" class="card-title">{{category.Name}}</div>
</ion-card>
</ion-item>
</ion-list>
</ion-content>
Can anyone provide guidance on how to effectively implement the ion-img tag in Ionic 3? Thank you.