Ion-img after scroll images appear

Ionic Framework ionic-v3
1

After little scroll page content image is appearing, but from starting all images not displaying…!

Here is my code…!!

<div class="siblings" *ngFor="let sibling of category.siblings; ![image](upload://koptxiPUfFWX78aCCRMrvP9lBvU.gif)
 <ion-img src="{{categories.imagePath+sibling.image}}" width="80" height="80"></ion-img>
 <div class="name">{{ sibling.name | truncate:25 }}</div>
</div>

and also visit below image

image
error-ion-img.gif600×1067 2.05 MB

2

the same is happening to me.

<div class="image-container"
*ngFor="let image of images"
[style.width]="imageSize + 'px'" [style.height]="imageSize + 'px'">
<ion-img [src]="image.url" class="image" tappable></ion-img>
<button color="white" style="position: absolute; top: 0px; right: 0px;" ion-button icon-only clear (click)="removeImage(image)">
  <ion-icon name="close"></ion-icon>
</button>
3

I believe ion-img is supposed to be used within a virtualScroll to ensure the image is rendered properly during scrolling

4

Indeed. In other instances you should just use the standard <img> tag and bind using [src], e.g.

<img [src]="categories.imagePath+sibling.image" width="80" height="80"></img>
5

This is happening to me too.

I don’t thins ion-img is only for VirtualScroll, because you can use the lazy loading feature anywhere, not only a in a list