Webp和< picture><源在chrome上对我不起作用 [英] Webp and <picture><source will not work for me on chrome

问题描述

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

I'm facing a problem, I just can't seem to find out what the problem is, I have:

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

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

On chrome, it's just defaulting to the png logo.

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

If I hover over the link in inspector, it shows the webp image.

如果我在新标签页中打开webp图片链接，则会加载文件.

If I open the webp image link in a new tab, it loads file.

我的标题返回:

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

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

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

If I change source srcset to img srcset - that will display the webp file.

Chrome:70.0.3538.110

Chrome: 70.0.3538.110

在MAMP Pro上进行了本地测试，没有显示.

Tested locally on MAMP Pro and doesn't display.

推荐答案

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

The WEBP is a tree. The PNG is a rose. You used the code below...

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

根据此来源，您应该重复来源，像这样:

According to this source you should repeat the source, like this:

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

When I run these scripts in FF and Chrome they show a tree, thus show the WEBP image. What do you see?

这篇关于Webp和< picture><源在chrome上对我不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！