Next.js Image组件中WebP动图仅在移动端显示全部帧问题

先试试绕开组件：用原生img标签 #

Next.js Image的优化逻辑（比如懒加载、自动格式转换）大概率和WebP动图的帧渲染机制冲突了，直接用原生<img>标签就能解决：

<img src="/path/to/your/animated.webp" alt="动图描述" />

要是还想保留Next.js的部分特性（比如固定尺寸），可以开unoptimized属性（Next.js 13及以上支持），禁用它的图像优化：

import Image from 'next/image';

<Image
  src="/path/to/your/animated.webp"
  alt="动图描述"
  width={300}
  height={300}
  unoptimized={true}
/>

检查组件配置坑点 #

• 别开placeholder属性（比如blurDataURL），占位图的渲染逻辑会干扰动图帧的清理，直接删掉这个配置试试。
• 把loading设为eager，懒加载的延迟渲染容易搞乱帧的渲染顺序：

<Image
  src="/path/to/your/animated.webp"
  alt="动图描述"
  width={300}
  height={300}
  loading="eager"
/>

封装自定义组件区分处理 #

如果不想全量替换，写个自定义组件，只针对WebP动图用原生img，其他图继续用Next.js Image：

import Image from 'next/image';

const CustomImage = ({ src, ...props }) => {
  // 这里可以根据文件名或者后缀判断是不是动图
  if (src.endsWith('.webp') && src.includes('animated')) {
    return <img src={src} {...props} />;
  }
  return <Image src={src} {...props} />;
};

export default CustomImage;

临时降级：换GIF格式 #

要是上面的方法都不好使，先把WebP动图转成GIF凑合用，虽然文件大，但Next.js Image对GIF的帧处理逻辑更稳定，不会出现残留问题。

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