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

【问题标题】：picture fallback default to png instead of webp图片回退默认为 png 而不是 webp
【发布时间】：2020-07-02 15:52:27
【问题描述】：

我这里有这个问题：

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

这里的探针是什么？

【问题讨论】：

标签： html css

【解决方案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 大于 465px 时，显示img_pink_flowers.jpg。

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

【讨论】：

【解决方案2】：

好吧，伙计们，我已经找到了。它一直有效，只是我的开发工具有点“控制”了我。我以为是 png，但如果我仔细看，上面写着currentSrc:

【讨论】：