如何在react-bootstrap中实现WEBP图片显示并降级到JPG？

下面提供几种简单易实现的方案，满足支持WEBP的访客显示对应格式、不支持则降级到JPG的需求：

方案1：封装原生picture标签结合React-Bootstrap Image #

原生picture标签是浏览器原生支持的降级方案，我们可以封装一个复用组件，既保留react-bootstrap Image的样式和功能，又实现格式切换：

import { Image } from 'react-bootstrap';

// 自定义兼容组件
const WebPImage = ({ webpSrc, jpgSrc, ...props }) => {
  return (
    <picture>
      {/* 优先加载WEBP格式 */}
      <source srcSet={webpSrc} type="image/webp" />
      {/* 不支持时降级到JPG */}
      <Image src={jpgSrc} {...props} />
    </picture>
  );
};

// 使用示例
<WebPImage 
  webpSrc="my/local/path/image.webp"
  jpgSrc="my/local/path/image.jpg"
  alt="图片描述"
  fluid // 保留react-bootstrap的属性
/>

这个方案无需额外依赖，封装后和原Image组件用法几乎一致，仅需多传入WEBP格式的路径。

方案2：使用第三方库react-webp #

react-webp已经封装好了WEBP兼容性检测逻辑，开箱即用：

1. 安装依赖：

npm install react-webp

2. 替换原Image组件使用：

import WebP from 'react-webp';
import { Image } from 'react-bootstrap';

// 方式1：用WebP包裹react-bootstrap的Image组件
<WebP
  webp="my/local/path/image.webp"
  fallback={<Image src="my/local/path/image.jpg" alt="图片描述" fluid />}
/>

// 方式2：直接使用WebP组件并复用react-bootstrap样式
<WebP
  webp="my/local/path/image.webp"
  fallback="my/local/path/image.jpg"
  className="img-fluid" // 复用react-bootstrap的样式类
  alt="图片描述"
/>

这个方案完全无需自己写兼容性判断，适合追求高效开发的场景。

方案3：自定义兼容性检测Hook（无依赖） #

如果不想引入第三方库，可以自己写一个简单的Hook检测WEBP支持，动态切换图片路径：

import { useState, useEffect } from 'react';
import { Image } from 'react-bootstrap';

// 检测WEBP支持的Hook
const useWebPSupport = () => {
  const [supportsWebP, setSupportsWebP] = useState(false);

  useEffect(() => {
    const testWebP = () => {
      const img = new Image();
      img.onload = () => setSupportsWebP(true);
      img.onerror = () => setSupportsWebP(false);
      // 用极小的WEBP测试图检测
      img.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==';
    };
    testWebP();
  }, []);

  return supportsWebP;
};

// 自定义图片组件
const ResponsiveImage = ({ src, ...props }) => {
  const supportsWebP = useWebPSupport();
  // 自动替换后缀：把.jpg/.jpeg换成.webp
  const imageSrc = supportsWebP ? src.replace(/\.(jpg|jpeg)$/i, '.webp') : src;

  return <Image src={imageSrc} {...props} />;
};

// 使用示例
<ResponsiveImage src="my/local/path/image.jpg" alt="图片描述" fluid />

这个方案无需任何外部依赖，通过自动替换后缀减少重复传参，适合对依赖有要求的场景。

内容的提问来源于stack exchange，提问作者holydragon