image not rendered when using ngIf

Issue

I have this basic script:

HTML:

<button ion-button (tap)="buttonclick()">Button</button>
<ion-img *ngIf="test" style="width: 20%; vertical-align: middle;" src="../assets/imgs/logo.png"></ion-img>

TS:

buttonclick()
{
  this.test = true;
}

What I expected to happen:

clicking the button shows the image.

What happens:

clicking the button makes a small grey rectangle appear where the image should be, as if the img source couldn't be found. Leaving the view and returning to it does make the image appear.

What am I doing wrong or how can I fix this issue? Any help is much appreciated!

Update:

After inspection of the source code, I notice a class img-unloadedis assigned to the image the first time. When I leave the view and return, the class changes to img-loaded, making the image appear. I guess this is an Ionic thing...? How to avoid this behaviour? Using the img tag instead of ion-img resolves the issue, but I'd rather want to use the ion-img tag.

Solution

You should use <img>, as the doc states:

Note: ion-img is only meant to be used inside of virtual-scroll

Here is an example that works

Answered By - Vega