如何使用 react-bootstrap 显示回退到 JPG 图像的 WEBP 图像？答案

【问题标题】：How to display WEBP images with fallback to JPG images using react-bootstrap?如何使用 react-bootstrap 显示回退到 JPG 图像的 WEBP 图像？
【发布时间】：2023-01-03 18:12:01
【问题描述】：

我目前正在使用 ReactJS 和 react-bootstrap 实现一个网站。

我关注了这个Image Component usage，这使我能够在我的网站上显示图像。

现在我想通过将图像从 JPG 更改为 WEBP 来优化网站（我将自己进行离线转换并将两个不同扩展名的所有图像放在同一个文件夹中）。之后，我想向可以处理它的访问者显示 WEBP 图像，并为那些不能处理的访问者回退到 JPG 图像。

我做了一些研究，但发现了一些技术，比如 using picture tag，这不是我在我的网站上使用的（我正在使用 react-bootstrap Image），或者我不熟悉的 Gatsby 的使用。

我现在的代码是这样的：

<Image src="my/local/path/image.jpg"/>

我只想在此 Image 组件中使用后备概念。没有复杂的定制，有什么办法可以做到吗？可以接受额外的第三方库。

【问题讨论】：

标签： reactjs jpeg react-bootstrap webp fallback

【解决方案1】：

根据 bootstrap 文档，Image 组件似乎在内部输出 img，同时传递 props 并为其分配类，所以我认为以下示例应该有效。

快速演示：stackblitz

<picture>
  <source srcSet="imgurl/img.webp" type="image/webp" />
  <source srcSet="imgurl/img.jpg" type="image/jpeg" />
  <Image src="imgurl/img.jpg" alt="image" fluid rounded />
</picture>

输出应类似于：

<picture>
<source srcset="imgurl/img.webp" type="image/webp" />
<source srcset="imgurl/img.jpg" type="image/jpeg" />
<img src="imgurl/img.jpg" alt="image" class="img-fluid rounded" />
</picture>

【讨论】：