如果在图片源标签中找不到图像，则后备图像

Question

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

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

如果 image.webp 丢失，我如何显示后备图像？onerror="this.src='fallback.jpg'"如果浏览img器不支持 webp 图像，则放置标签source可以工作，但如果我将该代码放在标签上则不起作用

编辑

更新了代码，它现在可以在不支持 webp 图像（safari）的浏览器上运行，但我仍然无法显示not-found.webp其他浏览器的图像

Answer 1

首先，元素下标签src使用的属性是错误的。该标签具有接受图像路径的属性。sourcepicturesourcesrcset

\n\n

<picture>\n  <source srcset="/path/to/image1.webp" type="image/webp">\n  <source srcset="/path/to/image1.jpg" type="image/jpeg">\n\n  <img src="/path/to/fallbackImage1.jpg">\n</picture>\n

\n\n

其次，您没有img按照文档正确处理后备标记。

\n\n

\n

HTML 元素包含零个或多个元素，以及一个为不同显示/设备场景提供图像替代版本的元素。

\n\n

浏览器将考虑每个子元素并选择其中最匹配的\n。如果未找到匹配项\xe2\x80\x94或浏览器不\n支持该元素\xe2\x80\x94，则选择元素的 src\n 属性的 URL。然后，所选图像将呈现在该元素占据的空间中。

\n

\n\n

仅当触发浏览器兼容性问题时，元素img内部使用的标记才有效。picture

\n\n

您需要通过其他解决方法脚本来实现此目的，因为默认机制无法满足需要。

\n\n

另外，您能详细说明一下使用picture元素的具体要求吗？

\n