0

I was trying to use onerror. Whenever image is not found in the folder it displays a placeholder. My image path is dynamic and comes from backend. Below is how I used it.

<img class="" src="{{imagePath}}my_image.jpg" onerror="this.src='{{imagePath}}placeholder.jpg';" alt="Image not found">

But this is not working and giving error.

Ron
  • 5,900
  • 2
  • 20
  • 30
Munjal
  • 37
  • 6
  • 1
    Does this answer your question? [javascript don't display the image placeholder if the image is not found](https://stackoverflow.com/questions/6962912/javascript-dont-display-the-image-placeholder-if-the-image-is-not-found) – Riyas Ac Aug 16 '20 at 03:22

1 Answers1

0

For this I used to use picture tag, browsers will try first source, then second, if browser don't have picture interpreter will use img tag.

Like this:

<picture>
  <source alt="Special Days" srcset="[First Image route].jpg" type="image/jpeg">
  <source alt="Special Days" srcset="[Second Image route].jpg" type="image/jpeg">
  <img alt="Imagen" src="[First Image route].jpg">
</picture>
Carlos Eduardo Salazar Mori
  • 363
  • 6
  • 13