如果在图片来源标签中未找到图像，则返回图像

Question

如果源标签中指定的图像丢失，如何添加后备图像？例如

<picture>
  <source srcset="image.webp 1x, [email protected] 2x" type="image/webp">
  <img srcset="image.jpg 1x, [email protected] 2x" src="image.jpg" onerror="this.onerror=null;this.srcset='not-found.jpg 1x, [email protected] 2x'">
</picture>

如果缺少image.webp，如何显示后备图像？如果浏览器不支持webp图像，则将onerror="this.src='fallback.jpg'"放置在img标记上是有效的，但是如果我不将该代码放置在source标记上，则无法使用此功能

编辑

更新了代码，现在可以在不支持webp图像（野生动物园）的浏览器上使用，但是我仍然无法为其他浏览器显示not-found.webp图像

Answer 1

首先，src元素下用于source标签的属性picture错误。 source标签具有srcset属性以接受图像路径。

<picture>
  <source srcset="/path/to/image1.webp" type="image/webp">
  <source srcset="/path/to/image1.jpg" type="image/jpeg">

  <img src="/path/to/fallbackImage1.jpg">
</picture>

第二，您没有按照img正确处理后备documentation标记。

HTML元素包含零个或多个元素，并且为图片提供替代版本的一个元素不同的显示/设备方案。

浏览器将考虑每个子元素并选择其中最匹配。如果找不到匹配项，或者浏览器找不到支持元素-元素的src的URL属性被选中。然后，所选图像将显示在元素占用的空间。

img元素内使用的picture标签仅在触发浏览器兼容性问题时有效。

您需要通过其他变通办法脚本来实现这一点，因为默认机制无法满足需要。

此外，您能否详细说明使用picture元素的要求？

Answer 2

这可以解决您的问题。

<img src="image1.jpg" onerror="this.onerror=null;this.src='image2.jpg';" />

调查图像处理。如果您需要进一步的帮助，请仔细阅读。https://blog.imagekit.io/how-to-handle-loading-images-that-may-not-exist-on-your-website-92e6c3c6ea63