Javascript 在NextJS中使用回退映像的最佳方式是什么？

最近，我一直在NextJS的一个项目中工作，该项目使用YoutubeAPI获取视频信息，包括缩略图URL

全分辨率图像的缩略图URL如下所示：

https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg

然而，有时YouTube无法生成全分辨率图像，在这种情况下，图像不会显示在我的网页上

如果使用URL

https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg

不存在我希望使用另一个类似

https://i.ytimg.com/vi/${videoId}/hqdefault.jpg

---

使用

next/image

处理此问题的最佳方法是什么？

您可以创建一个自定义映像组件，扩展内置的

next/image

，并在映像无法加载时通过触发

onError

回调添加回退逻辑

import React，{useState}来自“React”；
从“下一个/图像”导入图像；
const ImageWithFallback=（道具）=>{
常量{src，fallbackSrc，…rest}=props；
const[imgSrc，setImgSrc]=useState（src）；
返回(
{
setImgSrc（fallbackSrc）；
}}
/>
);
};
导出带有回退的默认图像；

然后，您可以直接使用自定义组件而不是

next/image

，如下所示：

---

传递一个

键

道具触发对

videoId

更改的重新渲染。

@juliomalves给出了99%的答案，不过我想补充一下。 在他的解决方案中更改src时出现问题，因为图像不会更新，因为它获取的imgSrc值没有更新。这是我对他的回答的补充：

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

const ImageFallback = (props) => {
    
    const { src, fallbackSrc, ...rest } = props;
    const [imgSrc, setImgSrc] = useState(false);
    const [oldSrc, setOldSrc] = useState(src);
    if (oldSrc!==src)
    {
        setImgSrc(false)
        setOldSrc(src)
    }
    return (
        <Image
            {...rest}
            src={imgSrc?fallbackSrc:src}
            onError={() => {
                setImgSrc(true);
            }}
        />
    );
};

export default ImageFallback;

import React，{useState}来自“React”；
从“下一个/图像”导入图像；
const ImageFallback=（道具）=>{
常量{src，fallbackSrc，…rest}=props；
const[imgSrc，setImgSrc]=useState（false）；
const[oldSrc，setOldSrc]=useState（src）；
if（oldSrc！==src）
{
setImgSrc（错误）
setOldSrc（src）
}
返回(
{
setImgSrc（真）；
}}
/>
);
};
导出默认图像回退；

---

现在，imgSrc仅用作一个标志，并且有src值的跟踪，这有助于更改图像，即使您以前有一个打开了回退图像的图像。

在我的示例中，这可以通过将

键
属性（基于
src
/
回退rc
）传递到
ImageWithFallback
来轻松解决。请参阅我的最新答案。