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

【问题标题】：Fallback image if image is not found in picture source tag如果在图片源标签中找不到图像，则备用图像
【发布时间】：2020-04-09 19:02:00
【问题描述】：

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

<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 丢失，我如何显示备用图片？如果浏览器不支持 webp 图像，则将 onerror="this.src='fallback.jpg'" 放在 img 标记上可以工作，但如果我将该代码放在 source 标记上不起作用

编辑

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

【问题讨论】：

这能回答你的问题吗？ Inputting a default image in case the src attribute of an html <img> is not valid?
@Devinloper 不，它不使用picture 标签而是一个object 标签

标签： html image fallback

【解决方案1】：

Can we bring the image URL from WordPress shortcode?

<script>
function onError() {
  this.onerror = null;
  this.parentNode.children[0].srcset = this.parentNode.children[1].srcset = this.src;
}
</script>

<picture>
   <source srcset="[ifsoDKI type="querystring" parameter="profile__img" />
   <source srcset="[ifsoDKI type="querystring" parameter="profile__img" />

   <img src="https://www.animationvideo.co/wp-content/uploads/2017/07/A-V.png" alt="logo" onerror="onError.call(this)" />
</picture>

【讨论】：

【解决方案2】：

第一张图片标签：成功加载webp的成功案例，没有任何后备案例

第二张图片标签：无法加载 webp (404) 然后回退并加载 jpg 图片

hectane.com中的完整文章

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Image Fallback</title>
  <script>
    function onError() {
      this.onerror = null;
      this.parentNode.children[0].srcset = this.parentNode.children[1].srcset = this.src;
    }
  </script>
</head>

<body>
<!-- Success condition webp is avalibale and onerror is not called-->
  <picture>
    <source srcset="
         https://assets.hectane.com/fallback-image-if-image-not-found-in-picture-source-tag/listing.webp
        " type="image/webp" />
    <source srcset="
          https://assets.hectane.com/fallback-image-if-image-not-found-in-picture-source-tag/listing.png
        " type="image/png" />
    <img src="https://assets.hectane.com/fallback-image-if-image-not-found-in-picture-source-tag/listing.jpg" alt="success" onerror="onError.call(this)" />
  </picture>
  <picture>
   <source srcset="
         https://assets.hectane.com/fallback-image-if-image-not-found-in-picture-source-tag/listing1.webp
        " type="image/webp" />
    <source srcset="
          https://assets.hectane.com/fallback-image-if-image-not-found-in-picture-source-tag/listing.webp
        " type="image/png" />
    <img src="https://assets.hectane.com/fallback-image-if-image-not-found-in-picture-source-tag/listing.jpg" alt="fall back jpg called" onerror="onError.call(this)" />
  </picture>
</body>

</html>

【讨论】：

当我的 webp 得到 404 时，我正在使用它来解决无限循环。
我所做的不是更改 srcset，而是删除 webp 源。使用this.parentNode.children[0].remove();

【解决方案3】：

首先，picture元素下source标签使用的属性src是错误的。 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>

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

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

浏览器会考虑每个子元素并选择他们之间的最佳匹配。如果没有找到匹配项——或者浏览器没有找到支持元素——元素src的URL 属性被选中。选定的图像随后会显示在元素占用的空间。

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

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

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

【讨论】：

我的错，示例与我的实际代码不同（我正确使用了 srcset 标签）。我已经用我的新代码更新了这个问题。我使用的是图片元素，因为在其他情况下我必须使用 webp 图像和 jpg 图像
@andyts93 感谢您对问题的澄清和适当的编辑。但是，您尝试对 onerror 执行的操作适用于而不是，它是。据我所知，当图像不存在于您为图片元素的源标记的 srcset 提到的路径中时，您不能期望加载“not-found.webp”图像。