Angular2: Show placeholder image if img src is not valid

Question

Goal: Load an image with a dynamic source. If no image is found, then load a placeholder image instead.

This should demonstrate what I'm trying to do, but I don't know how to conditionally set validImage based on whether the first img src is valid.

<img *ngif="validImage" class="thumbnail-image" src="./app/assets/images/{{image.ID}}.jpg" alt="..."> <img *ngif="!validImage" class="thumbnail-image" src="./app/assets/images/placeholder.jpg" alt="..."> 

validImage should be true if src="./app/assets/images/{{image.ID}}.jpg" returns an image. Otherwise it would return false and only the second img tag should show.

There are obvious work arounds like storing a list of all valid image sources, but I'm thinking there is a better way to accomplish this.

Any suggestions on the best way to implement this in Angular2 would be greatly appreciated.

Answer 1

The best way to handle broken image links is the use the onError event for the <img> tag:

<img  class="thumbnail-image" src="./app/assets/images/{{image.ID}}.jpg"       onerror="this.src='./app/assets/images/placeholder.jpg';"  alt="..." /> 

Answer 2

<img [src]="pic" (error)="setDefaultPic()"> 

And somewhere in your component class:

setDefaultPic() {   this.pic = "assets/images/my-image.png"; }