图片回退默认为 png 而不是 webp

Question

我这里有这个问题：

        <picture>
          <source
            srcset="/img/logoWebp/ebay.webp" type="image/webp"
          />
          <img
            alt="ebay"
            type="image/png"
            src="/img/logoPng/ebay.png"
          />
    </picture>

我已经阅读了这个标记，浏览器应该使用 webP 图像，但它使用的是 png 图像。 我正在使用 ofcorse 的最新版本的 chrome。

这里的探针是什么？

Answer 1

<picture>元素包含两个标签：一个或多个<source>标签和一个<img>标签。

浏览器将查找媒体查询与当前视口宽度匹配的第一个<source>元素，然后它将显示正确的图像（在 srcset 属性中指定）。 <img>元素需要作为<picture>元素的最后一个子元素，如果没有源标签匹配，则作为后备选项。

例子：

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg">
</picture>

当宽度大于 650px 时，显示img_orange_flowers.jpg 。

当宽度小于 650px 大于img_pink_flowers.jpg时，显示 img_pink_flowers.jpg。

当宽度小于 465px 时，显示img_white_flowers.jpg 。

Answer 2

好吧，伙计们，我发现了。 它一直有效，只是我的开发工具有点“控制”了我。 我以为是 png，但如果我仔细观察，它会显示currentSrc: