Tunjukkan placeholder jika gambar tidak ditemukan [duplikat]

Question

Saya mencoba menggunakan onerror. Setiap kali gambar tidak ditemukan di folder itu akan menampilkan placeholder. Jalur gambar saya dinamis dan berasal dari backend. Di bawah ini adalah cara saya menggunakannya.

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

Tapi ini tidak berhasil dan memberikan kesalahan.

Answer 1

Untuk ini saya biasanya menggunakan picturetag, browser akan mencoba sumber pertama, lalu kedua, jika browser tidak memiliki penerjemah gambar akan menggunakan imgtag.

Seperti ini:

<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>