如何为 Next.JS 的图像组件指定回退源

Question

我创建了一个名为 Avatar 的组件，它包装了 Next.JS 的 Image。 Avatar 的父组件使用 src 属性（它是一个字符串）来更改图像源（这将是一个远程源）。如果它没有指定 src 属性，那么将使用默认的本地图像，如以下代码片段所示。

import Image from "next/image";
import styles from "./Avatar.module.css";
import AvatarPhoto from "../images/avatar-default.png";

export const Avatar = ({ src, alt, size = 47 }) => {
  return (
    <div className={styles.imgContainer}>
      <Image
        className={styles.img}
        src={src ?? AvatarPhoto}
        alt={alt}
        width={size}
        height={size}
      />
    </div>
  );
};

我无法实现的是，如果指定的来源无效，如何显示本地图像。例如;如果指定源中没有图片（如果获取源请求结果为404错误），我想使用默认头像。

是否有 Next 的 Image 的回退属性？如果没有，我该怎么做？

Answer 1

我认为这应该可行。

export const Avatar = ({ src, alt, size = 47 }) => {
  const [error, setError] = useState(false);

  return (
    <div className={styles.imgContainer}>
      <Image
        className={styles.img}
        src={!error ? src : AvatarPhoto}
        alt={alt}
        width={size}
        height={size}
        onError={() => setError(true)}
      />
    </div>
  );
};

如何为 Next.JS 的图像组件指定回退源

How to specify fallback source for Image component of Next.JS

reactjs

next.js