Next.js 中的图像加载和错误状态处理
如何为图片创建加载和错误状态占位符？
太长不看
点击此处查看完整代码
完整版
创建基本图像
next/image提供了一种创建图像的简便方法。
import Image from 'next/image'
<Image src="https://i.imgur.com/gf3TZMr.jpeg" alt="Some alt text" />
但是，我们仍然需要配置一些属性以满足我们的特定需求，例如：
- 加载时的占位符
- 图片加载失败时的错误占位符
下面的 GIF 动画展示了用户在使用慢速网络连接加载图片时看到的效果。
这给人一种我们的应用程序出了问题的印象。
如何处理加载状态？
只需加上“ placeholderand”blurDataURL即可。
<Image
src="https://i.imgur.com/gf3TZMr.jpeg"
placeholder="blur"
blurDataURL="/assets/image-placeholder.png"
/>
这段代码将产生以下结果：
占位符加载前会有短暂的延迟，
因为即使是占位符图片也需要从服务器获取。
如果我们需要确保图像有一个即时占位符，
请参阅本指南，了解如何创建动态图像占位符。
好处是，一旦占位符图像加载完毕，所有使用相同资源的其他图像
都会立即显示该占位符。
加载图片时如果出现错误会发生什么？
一种可能性是，用户会永远盯着这个占位符看。
或者这个更悲伤的版本，它展现了alt广阔的空间。
看到太多不必要的空间，感觉很不好，对吧？
如何在错误状态下显示另一张图片？
我们可以在发生错误时，在回调函数中将值替换src为路径。error imageonError
const [src, setSrc] = React.useState('https://i.imgur.com/gf3TZMr.jpeg');
<Image
{...props}
src={src}
placeholder="blur"
blurDataURL="/assets/image-placeholder.png"
onError={() => setSrc('/assets/image-error.png')}
/>
我认为这样好得多。
将所有代码整合在一起
为了便于复现该行为，我们可以创建一个自定义图像组件。
function CustomImage({alt, ...props}) {
const [src, setSrc] = React.useState(props.src);
return (
<Image
{...props}
src={src}
alt={alt} // To fix lint warning
onError={() => setSrc('/assets/image-error.png')}
placeholder="blur"
blurDataURL="/assets/image-placeholder.png"
/>
);
}
结论
当网页应用显示大量图片时，最好能立即向用户反馈当前状态。一种方法是使用备用图片来显示当前图片的状态。
如果你觉得这篇文章有用，并且想支持我，请告诉我。
