如果找不到图像，则显示占位符[重复]

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>