为什么<picture>元素内的src不加载？

Question

<picture>
  <source type="image/webp" srcset="images/me.webp">
  <img id="avatar" src="images/me.webp" alt="Me">
</picture>

当我使用picture元素时，浏览器（chrome）不会使用其他资源加载图像。但是，当我仅将<picture>元素替换为<img>时，它可以正常工作：

<img id="avatar" src="images/me.webp" alt="Me">

为什么会这样？

Answer 1

如果浏览器支持，则您的代码将加载me.webp图像。否则，将显示jpg图像（有效）。 Chrome 67支持webp格式，因此我能弄清的唯一问题是me.webp不在images文件夹中。

Answer 2

AFAIK，<picture>用于希望在响应式设计中使用多个可能的图像的情况。最后的<img>是后备。听起来images/me.webp无效；

除非您真正使用<picture>，否则请使用<img>。