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

Question

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

Answer 1

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

或者你可以使用这个包。

编辑：Nextjs 11 现在已经正式发布了组件的placeholder='blur'props 。<Image>您可以在此处阅读有关此图像占位符的更多信息。确保通过运行更新你的 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 来表示图像。