Search code examples
javascripthtmlangularangular-ng-if

Want to load img inside the div with the ngif, and when the ngif==false

Basically, I have a div with the *ngIf condition, but I also have a img inside this div. It is an login page, I want to show different login page for different types of user. That is why I use ngIf. However, the img is not load until I click the username input field. Is there anyway I could fix this problem? Sorry about any of unclear description, still improving my English.

This is the simple version of the problem: 

<div *ngIf="somecondition">
<img> 
</div>

So I want the img can be loaded no matter the ngif is true or false, and the img must be inside the div.

Thanks for any help..

Solution

  • I guess what you want is to "load" (not show) no matter the condition of *ngIf is...

    Just try using [style.display]="condition ? '' : 'none'" instead of *ngIf="condition"

    I guess what's happening is that when condition is false, the img is not in the dom and hence the browser doesn't load it... When you hide it, instead of removing it from dom via *ngIf, the image will load...