Setting a default image in Html when the image unable to load (Angular)
Photo by Medhat Ayad on Pexels.com

Setting a default image in Html when the image unable to load (Angular)

Image Frames
Image Frames

Many time we want to set default image in html image tag when it unable to load given image. We can achieve this in angular as well as in HTML.

<img [src]='path' (error) ="onImgError($event)">

onImgError(event) { 
    event.target.src = 'assets/path_to_your_placeholder_image.jpg';
}

OR

<img [src]='path' (error) ="$event.target.src = 'assets/path_to_your_image.jpg'">

OR

<img src='path' onerror ="this.src = 'assets/path_to_your_placeholder_image.jpg'">

Leave a Reply