[英]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>
On chrome, it's just defaulting to the png logo.在 chrome 上,它只是默认为 png 标志。
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.如果我在新选项卡中打开 webp 图像链接,它会加载文件。
My headers return:我的标题返回:
image/webp,image/apng,image/ , /*;q=0.8
图像/webp,图像/apng,图像/ , /*;q=0.8
If I change source srcset to img srcset - that will display the webp file.如果我将source srcset更改为img srcset - 这将显示 webp 文件。
Chrome: 70.0.3538.110
铬:70.0.3538.110
Tested locally on MAMP Pro and doesn't display.在 MAMP Pro 上本地测试,不显示。
The WEBP is a tree. WEBP 是一棵树。 The PNG is a rose.
PNG 是一朵玫瑰。 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>
When I run these scripts in FF and Chrome they show a tree, thus show the WEBP image.当我在 FF 和 Chrome 中运行这些脚本时,它们会显示一棵树,从而显示 WEBP 图像。 What do you see?
你看到了什么?
After reading through this question and answer, I was still a little confused, so I'd like to add this clarification: When you use the Chrome inspect tool on your image, it will still highlight the line with your <img>
in it, which makes it seem that the larger file is loading.看完这个问答后,我还是有点困惑,所以我想补充一点:当你在你的图片上使用 Chrome 检查工具时,它仍然会突出显示你的
<img>
行,这使得似乎正在加载更大的文件。 But, as you can see with the example given, the WEBP is actually what is loading and showing on the screen, because neither snippet shows the photograph of a rose found here .但是,正如您在给出的示例中所看到的,WEBP 实际上是加载并显示在屏幕上的内容,因为这两个片段都没有显示此处找到的玫瑰的照片。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.