html - 为什么里面没有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">

为什么会这样？

score 2 · Accepted Answer

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

score 0 · Accepted Answer

<picture>当您希望在响应式设计中使用多个可能的图像时，可以使用 AFAIK 。最后<img>是后备。听起来好像images/me.webp不行。

除非你真的在使用，否则<picture>使用<img>.

2 回答 2