如何在图片标签中显示webp图像？

Question

此图片标签有什么问题？

<picture>
    <source type="image/webp" srcset="https://media3.giphy.com/media/8FNlmNPDTo2wE/200.webp">
    <source type="video/mp4" srcset="https://media3.giphy.com/media/8FNlmNPDTo2wE/200.mp4">
    <img src="https://media3.giphy.com/media/8FNlmNPDTo2wE/200.gif" width="356" height="200" alt="me-5sf-fickledavid-8FNlmNPDTo2wE">
</picture>

Chrome浏览器应获取webp图像，但它始终使用img和gif。如果我删除img标签，Chrome不会显示任何内容。

这是我作为演示https://codepen.io/maxim-palenov/pen/oNvarZY制作的笔。

Answer 1

这根本没有问题。它按预期工作。在img标签中，它不会替换webp图片。

这就是您要做的。

• 将gif图像重命名为损坏的链接。尽管如此，它将继续显示图像。
• 在上面之后，如果重命名webp图像链接，现在您将看到图像损坏。