Ion-img ugly placeholder during load

Ionic Framework ionic-v3
1

I am using ion-img for my images, and when I am moving around between views, I am getting placeholder icons in my app, and all the elements bounce around also because of this.

I tried setting width and height to have fixed size, but it is not working

 <ion-img width="400" height="300" src="{{serverUrl}}/images/{{item.fileName}}"></ion-img>

image%20(1)

Is there a way I can hide this img iconduring loading?

2

Is add *ngif help?

<ion-img *ngIf="serverUrl && item?.fileName" width="400" height="300" src="{{serverUrl}}/images/{{item.fileName}}"></ion-img>
3

i think not, because the items are rendered this way

 <ion-item *ngFor="let item of (items)">

This means, before the ion-img DOM is created, the items will have all full values.

What basically happens:
XHR request to server to get items
ngFor starts to render my items
ion-img tag is created, that already has serverUrl and item.fileName.

4

try this

<ion-img width="400" height="300" [src]="serverUrl+'/images/'+item.fileName"></ion-img>
5

Alt tag in img-src for alternative text as long as image is not loaded?

Not sure what the default behavior of ion-img shpuld be.

The display seems to show the url for the image is broken. Can u try the url in a browser?

Try img?

Otherwise you will need to build some logic to display default image which gets replaced by other once ion-img has loaded. Then again that may seem to defeat the purpose of a lazy loaded image