如何在图片标签中显示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图像。