reactjs 如何使用react-bootstrap将WEBP图像显示为JPG图像？

cnjp1d6j 于 2023-01-04 发布在 React

关注(0)|答案(1)|浏览(157)

我目前正在使用ReactJS和react-bootstrap实现一个网站。
我遵循了这个Image Component usage，它使我能够在我的网站上显示图像。
现在我想优化网站，将图片从JPG转换为WEBP（我会自己做离线转换，并将两个不同扩展名的所有图片放在同一个文件夹中）。之后，我想向那些可以处理的访问者显示WEBP图片，并为那些不能处理的访问者回退到JPG图片。
我做了一些研究，但发现一些技术，如using picture tag，这不是我在我的网站中使用的（我使用的是react-bootstrap Image），或使用盖茨比，这是我不熟悉的。
我现在拥有的代码是这样的：

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

我只是想在这个图像组件中使用回退概念。有没有什么方法可以不经过复杂的定制就可以做到这一点？可以接受额外的第三方库。

reactjs

来源：https://stackoverflow.com/questions/74989856/how-to-display-webp-images-with-fallback-to-jpg-images-using-react-bootstrap

1条答案

按热度按时间

0x6upsns1#

根据document Bootstrap 发布的code，Image组件似乎在内部输出img，同时传递props并向其分配所需的类，因此我认为下面的示例应该可以工作。
我只在Firefox上禁用了webp的情况下测试了它，但这里有一个快速演示：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>

以上HTML格式的输出应类似于：

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

赞(0）回复(0）举报 2023-01-04

我来回答

reactjs 如何使用react-bootstrap将WEBP图像显示为JPG图像？

1条答案

相关问题

热门标签

最新问答