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

Question

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

Answer 1

他们的分支上有一个实验性的合并拉取请求@canary。如果您想尝试一下，只需在最新发布的金丝雀上更新您的 nextjs 版本即可。只需在组件上添加一个新的placeholder="blur"props即可Image。

或者你可以使用这个包。

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

Answer 2

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

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

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