為什么里面沒有src <picture> 元素負載？

Question

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

當我使用picture元素時，瀏覽器（chrome）不會使用其他資源加載圖像。 但是，當我僅用<img>元素替換<picture> ，它可以正常工作：

<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> 。