在 Next.Js 中加载图像时如何显示占位符？答案

【问题标题】：How to display a placeholder while the image is loaded in Next.Js?在 Next.Js 中加载图像时如何显示占位符？
【发布时间】：2021-08-07 10:09:46
【问题描述】：

我使用 getStaticProps 从 Firebase 获取一些图像，然后使用下一个图像组件显示它们。但是，它们需要一段时间才能显示，如何在它们尚未加载时显示占位符？

【问题讨论】：

您能分享一下您目前拥有的代码吗？

标签： next.js nextjs-image

【解决方案1】：

在 @canary 分支上有一个实验性的合并 pull request。如果你想尝试一下，只需在最新发布的金丝雀上更新你的 nextjs 版本。只需在 Image 组件上添加一个新的 placeholder="blur" 属性即可。

或者你可以使用这个package。

编辑：Nextjs 11 现在正式发布了placeholder='blur' 组件的<Image> 属性。您可以阅读here 更多关于此图像占位符的信息。确保通过运行 npm i next@latest react@latest react-dom@latest 更新你的 nextjs、react、react-dom 版本

【讨论】：

【解决方案2】：

使用placeholder 属性，在加载图像时使用的占位符，可能的值是blur 或empty。默认为empty。

blur 时，blurDataURL 属性将用作占位符。如果src 是静态导入的对象，并且导入的图像是jpg、png 或webp，则blurDataURL 将自动填充。

请注意，对于动态图像，您必须提供blurDataURL 属性。 “blurDataURL”属性的内容应该是一个小的Data URL来表示图像。

【讨论】：