WebP图片不兼容老浏览器，怎么优雅降级？

树行酱~ 提问于 2026-03-26 22:07:20 阅读 21

优化

我最近把项目里的图片全换成WebP格式了，体积小了很多，但在一些老版本的 Safari 和 IE 上直接显示不了。试过用 Modernizr 检测，但感觉太重了。现在想在 React 里做个简单的 fallback，比如 WebP 加载失败就换回 JPG，但不确定怎么写才靠谱。

目前写了下面这个组件，但发现 onerror 触发后 src 切换了，图片还是空白，不知道是不是 setState 导致重新渲染的问题？

function ImageWithFallback({ webpSrc, fallbackSrc }) {
  const [src, setSrc] = useState(webpSrc);
  return (
    <img
      src={src}
      onError={() => setSrc(fallbackSrc)}
      alt="product"
    />
  );
}

我来解答赞 2 收藏

反馈

1 条解答

a'ゞ莉莉 Lv1

在WP里面处理这种问题其实挺常见的，特别是用Gutenberg块编辑器的时候。你这个组件的思路是对的，但有个小坑要注意。

onError事件触发后，虽然设置了新的src，但浏览器可能已经缓存了错误状态。直接改下代码就行：

function ImageWithFallback({ webpSrc, fallbackSrc }) {

  const [src, setSrc] = useState(webpSrc);

  

  return (

    <img

      src={src}

      onError={(e) => {

        e.target.src = fallbackSrc;

        e.target.onerror = null; // 关键是这一行，防止重复触发

      }}

      alt="product"

    />

  );

}

这样写更直接，不用再调用setState，性能也更好。另外记得检查图片路径是不是绝对路径，相对路径有时候会因为路径解析问题导致加载失败。

要是用在WP主题里，可以在functions.php里加个简单的过滤器来自动替换WebP文件名，不过这得看你具体需求了。折腾图片格式这事，真是让人又爱又恨啊。

2026-03-26 22:08