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图片链接，则会加载文件。

我的标题返回：

image / webp，image / apng，image / ， / *; q = 0.8

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

Chrome：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>

根据this source，您应该像这样重复源代码：

<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图像。你看到了什么？

Answer 2

在阅读完该问题和答案后，我仍然有些困惑，因此，我想补充一下这一点：当您在图片上使用Chrome检查工具时，它仍会突出显示{{1 }}，似乎正在加载较大的文件。但是，正如您从给出的示例中看到的那样，WEBP实际上是正在加载并显示在屏幕上的内容，因为这两个代码段都未显示发现here的玫瑰照片。

Webp和<picture> <source will =“” not =“” work =“” for =“” me =“” on =“” chrome =“”

2 个答案: