渲染图片时出现React Hydration Error及fetchPriority属性警告求助

排查步骤 #

• 定位属性来源
  先检查代码里的<img>标签，确认是否手动添加了fetchPriority属性；再排查第三方UI组件库、图片优化工具（比如Next.js的Image组件），这类工具可能自动注入该属性。
• 验证Hydration不匹配点
  打开浏览器开发者工具，React在开发模式下会明确标出Hydration不匹配的具体位置。找到对应组件，对比服务端渲染的HTML和客户端渲染后的DOM，确认是否是fetchPriority大小写不一致导致的差异。

解决方法 #

• 修正属性大小写
  如果是手动添加的fetchPriority，直接改成小写的fetchpriority——浏览器原生支持这个小写属性，React也能正确识别。示例：

  // 错误写法
  <img src="/pic.jpg" fetchPriority="high" alt="示例图" />
  // 正确写法
  <img src="/pic.jpg" fetchpriority="high" alt="示例图" />
  

• 过滤意外传递的属性
  如果是父组件不小心把fetchPriority传到了子组件的DOM元素上，用解构赋值把这个属性过滤掉：

  function CustomImg({ fetchPriority, ...restProps }) {
    return <img {...restProps} alt="自定义图片" />;
  }
  

• 处理第三方工具生成的属性
  要是第三方组件/图片库自动加的fetchPriority，先查文档看有没有配置项能关掉；没有的话，用useEffect在客户端挂载后移除这个属性：

  import { useEffect, useRef } from 'react';
  
  function FixedImg({ src, alt }) {
    const imgRef = useRef(null);
    useEffect(() => {
      imgRef.current?.removeAttribute('fetchPriority');
    }, []);
    return <img ref={imgRef} src={src} alt={alt} />;
  }
  

• 临时禁用Hydration警告（不推荐常规使用）
  要是以上方法都不管用，且确认这个属性不影响功能，可以给组件加suppressHydrationWarning={true}应急，但别当成常规方案：

  <img src="/pic.jpg" fetchPriority="high" alt="示例图" suppressHydrationWarning={true} />
  

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