画像が見つからない場合はプレースホルダーを表示する[重複]

Question

使用しようとしていましたonerror。フォルダ内に画像が見つからない場合は常に、プレースホルダーが表示されます。私の画像パスは動的で、バックエンドから来ています。以下は私がそれをどのように使用したかです。

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

しかし、これは機能せず、エラーが発生します。

Answer 1

以前はpictureタグを使用していましたが、ブラウザは最初のソースを試し、次にブラウザに画像インタプリタがない場合はimgタグを使用します。

このような：

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