Next.js Image组件加载失败时如何设置fallback图片？

问题说明 #

我通过movie.primaryImage.url获取图片地址并渲染Next.js的Image组件，但仅通过判断url是否存在来显示fallback图片的方式无法处理图片加载失败的场景（比如url存在但资源失效），需要实现加载失败时自动切换到备用图片。

以下是我当前的尝试代码：

{
  movie.primaryImage.url 
  ?
  <Image 
    src={movie.primaryImage.url}
    alt={movie.titleText.text}
    height={300}
    width={200}
  />
  :
  <Image 
    src={'/images/image-not-found.png'} // 替换为你的本地fallback图片路径
    alt={movie.titleText.text}
    height={300}
    width={200}
  />
}
<h2>{movie.titleText.text}</h2>
<p>Release Year: {movie.releaseYear.year}</p>

解决方案 #

方法1：使用状态结合Image组件的onError事件 #

Next.js的Image组件支持onError回调，我们可以通过状态变量控制显示的图片地址，加载失败时切换为fallback地址：

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

// 在组件内部
const [imageSrc, setImageSrc] = useState(movie.primaryImage.url);

const handleImageError = () => {
  setImageSrc('/images/image-not-found.png'); // 替换为你的fallback图片路径
};

return (
  <>
    <Image 
      src={imageSrc}
      alt={movie.titleText.text}
      height={300}
      width={200}
      onError={handleImageError}
    />
    <h2>{movie.titleText.text}</h2>
    <p>Release Year: {movie.releaseYear.year}</p>
  </>
);

方法2：封装可复用的FallbackImage组件 #

如果多个地方需要这个功能，可以封装成独立组件，方便复用：

// components/FallbackImage.js
import { useState } from 'react';
import Image from 'next/image';

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

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

export default FallbackImage;

使用时：

import FallbackImage from '@/components/FallbackImage';

// 在页面中
<FallbackImage
  src={movie.primaryImage.url}
  fallbackSrc="/images/image-not-found.png"
  alt={movie.titleText.text}
  height={300}
  width={200}
/>
<h2>{movie.titleText.text}</h2>
<p>Release Year: {movie.releaseYear.year}</p>

注意事项 #

• 确保fallback图片的路径正确，若使用本地图片，需将图片放置在public目录下，路径以/开头
• 如果使用远程fallback图片，需要在next.config.js中配置images.remotePatterns允许该域名

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