为什么浏览器不加载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版本？

在此先感谢您花时间/对此的想法，以帮助我理解它。

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

• 使用这个搜索查询在StackOverflow上检查。
• 在谷歌搜索中寻找一些东西，例如
• 重新检查相关用法文档，以确保我配置正确

Answer 1

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

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

通过使用此方法检查元素属性并查看 currentSrc 属性，我可以确认正在使用 webp。

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

我依赖于 Chrome 开发者工具在元素窗口中突出显示的内容。在那个突出显示的区域，它看起来像是正在渲染的

<img>

标签。

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

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

Answer 2

如果您的 gatsby 项目将 png、jpg 等其他扩展名转换为 Gatsby Image 组件并仅代替 Webp 图像渲染标签，这就是解决方案如果您使用的是 gatsby-remark-copy-linked-files，则此插件默认复制所有静态文件夹的内容仅忽略默认扩展名 [

png

,

jpg

,

jpeg

,

bmp

,

tiff

] ，因此我们将 'webp' 传递给 gatsby-remark-copy-linked-files 选项以忽略这个文件。

ignoreFileExtensions: [`png`, `jpg`, `jpeg`, `bmp`, `tiff` ,`webp`],