问题
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.
If I hover over the link in inspector, it shows the webp image.
If I open the webp image link in a new tab, it loads file.
My headers return:
image/webp,image/apng,image/,/*;q=0.8
If I change source srcset to img srcset - that will display the webp file.
Chrome: 70.0.3538.110
Tested locally on MAMP Pro and doesn't display.
回答1:
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>When I run these scripts in FF and Chrome they show a tree, thus show the WEBP image. What do you see?
来源：https://stackoverflow.com/questions/53598308/webp-and-picturesource-will-not-work-for-me-on-chrome