Next.js next/image组件无限循环报错，替换fallback图片方案无效求协助

我在项目中使用Next.js ^12.2.3-canary.17版本的next/image组件，目前遇到的问题是：部分图片在源目录中缺失，导致组件不断输出无限循环的错误日志。

我尝试通过设置onerror属性为null并替换src为备用图片的方案解决，但该方案并未生效。

注：已在next.config.js中配置了有效域名，本次错误与此无关。

1. 封装自定义Image组件，受控处理错误状态 #

next/image的内部加载机制会在src变化时重新触发校验，直接修改src可能导致重复触发错误。通过状态控制加载状态，可避免无限循环：

import Image from 'next/image';
import { useState } from 'react';

const FallbackImage = ({ src, fallbackSrc, ...props }) => {
  const [currentSrc, setCurrentSrc] = useState(src);
  const [hasError, setHasError] = useState(false);

  const handleError = () => {
    if (!hasError) {
      setHasError(true);
      setCurrentSrc(fallbackSrc);
    }
  };

  return (
    <Image
      src={currentSrc}
      {...props}
      onError={handleError}
    />
  );
};

export default FallbackImage;

使用时替换原next/image：

<FallbackImage
  src="/missing-image.jpg"
  fallbackSrc="/fallback-image.png"
  width={500}
  height={500}
  alt="示例图片"
/>

2. 提前校验图片存在性 #

如果是本地图片，可在服务端或构建阶段提前校验文件是否存在，直接返回备用图片路径：

Pages Router服务端校验示例 #

// pages/example.js
import Image from 'next/image';
import fs from 'fs/promises';
import path from 'path';

export async function getServerSideProps() {
  const imagePath = path.join(process.cwd(), 'public/missing-image.jpg');
  let imageSrc = '/missing-image.jpg';
  
  try {
    await fs.access(imagePath);
  } catch {
    imageSrc = '/fallback-image.png';
  }

  return { props: { imageSrc } };
}

export default function ExamplePage({ imageSrc }) {
  return (
    <Image
      src={imageSrc}
      width={500}
      height={500}
      alt="示例图片"
    />
  );
}

3. 临时禁用图片优化（仅调试用） #

如果上述方案暂时无法实施，可通过unoptimized属性关闭Next.js的图片优化，此时常规onerror逻辑会生效：

<Image
  src="/missing-image.jpg"
  width={500}
  height={500}
  alt="示例图片"
  unoptimized
  onError={(e) => {
    e.target.src = '/fallback-image.png';
    e.target.onerror = null;
  }}
/>

注意：关闭优化会丢失Next.js图片组件的自动格式转换、响应式缩放等核心特性，不建议长期使用。

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