为什么浏览器不加载 webp 图片？ （gatsby 站点，从 mdx 生成的页面）

Question

我想知道是否有人可以帮助我确定为什么在浏览器中查看我的 gatsby 网站时 webp 图像没有呈现？

我正在使用 gatsby-plugin-mdx 和 gatsby-remark-images 以及选项 withWebp: true

使用此设置，发送到浏览器的结果输出源（大致）如下所示...

<picture>
  <source srcset-"/static/11aaa2b.../a12bc/example-image-1.webp ... etc... snipped
  <source srcset-"/static/33ccc4d.../a12bc/example-image-1.jpg ... etc... snipped
  <img src="/static/33ccc4d.../a12bc/example-image-1.jpg ... etc... snipped
</picture>

但是，浏览器只呈现 <img> 版本，即 jpg。

我可以看到 webp 文件在那里。

我还确认 webp 版本可以访问（即我可以专门导航到 webp 文件...

为什么浏览器不呈现 webp 版本？

在此先感谢您 time/thoughts 帮助我理解它。

我已经搜索过，但尚未找到使用以下内容的答案：

• 使用 this search query 在 Whosebug 上查看。
• 在 Google 搜索的几种变体中寻找内容，for example
• 重新检查 relevant usage doco，以确保我配置正确

Answer 1

在上面的评论中由 @ksav 回答。

事实证明，浏览器实际上正在提供图像的 webp 版本。

通过使用 并查看 currentSrc 属性，我可以确认正在使用 webp。

问题出在我之前的检查方式上。

我依赖于 Chrome 开发人员工具在元素 window 中突出显示的内容。在那个突出显示的区域，它看起来像是正在呈现的 <img> 标签。

但现在，仔细检查属性（现在我知道如何正确使用它），我发现一切正常。

谢谢 @ksav 的建议。这回答了这个问题。