NextJS 12引用不存在的图片时页面无限加载如何解决？

出现该问题的核心原因是 Next.js 12 原生 Image 组件没有内置加载错误的降级逻辑，资源请求失败后不会主动终止加载流程，进而导致页面持续处于加载状态。可通过以下方案解决：

方案1：单组件添加错误捕获处理 #

直接在使用 Image 组件的地方添加 onError 回调，加载失败时替换为占位内容或隐藏组件：

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

export default function Home() {
  const [imgLoadFailed, setImgLoadFailed] = useState(false);

  return (
    <div>
      {!imgLoadFailed && (
        <Image
          src="/image_dont_exist"
          alt="不存在的图片"
          width={400}
          height={400}
          objectFit="cover"
          onError={() => setImgLoadFailed(true)}
        />
      )}
      {/* 加载失败时的占位内容，可自行调整样式 */}
      {imgLoadFailed && (
        <div
          style={{
            width: 400,
            height: 400,
            background: "#f5f5f5",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            color: "#999",
          }}
        >
          图片加载失败
        </div>
      )}
    </div>
  );
}

方案2：全局封装自定义Image组件统一处理 #

如果项目多处使用图片资源，可封装通用的自定义图片组件，避免每个页面重复写错误处理逻辑：

// components/CustomImage.js
import Image from "next/image";
import { useState } from "react";

export default function CustomImage(props) {
  const [loadError, setLoadError] = useState(false);

  // 加载失败时返回全局统一的占位UI
  if (loadError) {
    return (
      <div
        style={{
          width: props.width,
          height: props.height,
          background: "#f0f0f0",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          fontSize: "14px",
          color: "#aaa",
        }}
      >
        {props.alt || "资源加载失败"}
      </div>
    );
  }

  return (
    <Image
      {...props}
      onError={(e) => {
        setLoadError(true);
        // 透传自定义的onError回调
        props.onError?.(e);
      }}
    />
  );
}

使用时直接替换原生Image组件即可：

import CustomImage from "@/components/CustomImage";

export default function Home() {
  return (
    <div>
      <CustomImage
        src="/image_dont_exist"
        alt="不存在的图片"
        width={400}
        height={400}
        objectFit="cover"
      />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Freddx L.