圖片回退默認為 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: