Angular2: Show placeholder image if img src is not valid
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="..." />
<img [src]="pic" (error)="setDefaultPic()">
And somewhere in your component class:
setDefaultPic() {
this.pic = "assets/images/my-image.png";
}