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，如何显示后备图像？如果浏览器不支持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>

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

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

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

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

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

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

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

如果在图片来源标签中找不到图片，则为备用图片

2 个答案: