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

Question

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

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>
);
};

我不能做到的是，如果指定的源是无效的，我怎么能显示本地图像。例如;如果在指定的源中没有图像(如果对源的Get请求结果是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>
);
};