javascript - 在 NextJS 中拥有后备图像的最佳方法是什么？

Question

最近，我一直在 NextJS 的一个项目中工作，它使用 YoutubeAPI 来获取视频信息，包括缩略图 URL。
全分辨率图像的缩略图 URL 如下所示:https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg但是，有时 YouTube 无法生成全分辨率图像，在这种情况下，图像不会显示在我的网页上。
如果 URL 为 https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg 的图像不存在 我希望使用另一个 URL，如 https://i.ytimg.com/vi/${videoId}/hqdefault.jpg使用 next/image 处理此问题的最佳方法是什么？ ?

Answer 1

您可以创建自定义图像组件来扩展内置 next/image如果图像加载失败，通过触发 onError 添加回退逻辑打回来。

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

const ImageWithFallback = (props) => {
    const { src, fallbackSrc, ...rest } = props;
    const [imgSrc, setImgSrc] = useState(src);

    return (
        <Image
            {...rest}
            src={imgSrc}
            onError={() => {
                setImgSrc(fallbackSrc);
            }}
        />
    );
};

export default ImageWithFallback;

然后，您可以直接使用自定义组件而不是 next/image如下:

<ImageWithFallback
    key={videoId}
    layout="fill"
    src={`https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`}
    fallbackSrc={`https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`}
/>

通过 key在 videoId 上触发重新渲染的 Prop 改变。