最近,我一直在 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
处理此问题的最佳方法是什么? ?
最佳答案
您可以创建自定义图像组件来扩展内置 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 改变。
关于javascript - 在 NextJS 中拥有后备图像的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66949606/