Webp和<picture> <source在Chrome上对我不起作用

Question

我面临一个问题，我似乎无法找出问题所在，但我有：

<picture>
    <source type="image/webp" srcset="/images/meh_logo.webp">
    <img src="/images/meh_logo.png" type="image/png">
</picture>

在chrome上，它只是默认使用png徽标。

如果将鼠标悬停在检查器中的链接上，它将显示webp图像。

如果我在新选项卡中打开webp图像链接，它将加载文件。

我的标题返回：

图像/ WEBP，图像/ APNG，图像/ ， /*;q=0.8

如果我将源srcset更改为img srcset-将显示webp文件。

铬：70.0.3538.110

在MAMP Pro上进行了本地测试，并且不会显示。

Answer 1

WEBP是一棵树。PNG 是一朵玫瑰。您使用了下面的代码...

<picture>
  <source type="image/webp" srcset="https://www.gstatic.com/webp/gallery/4.sm.webp">
  <img src="https://www.gstatic.com/webp/gallery3/1.sm.png" type="image/png">
</picture>

根据此来源，您应该重复该来源，如下所示：

<picture>
  <source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" type="image/webp">
  <source srcset="https://www.gstatic.com/webp/gallery3/1.sm.png" type="image/png">
  <img src="https://www.gstatic.com/webp/gallery3/1.sm.png" alt="Image" class="tm-img">
</picture>

当我在 FF 和 Chrome 中运行这些脚本时，它们会显示一棵树，从而显示 WEBP 图像。你看到了什么？