如何在 Next.Js 中加载图像时显示占位符？
How to display a placeholder while the image is loaded in Next.Js?
我正在使用 getStaticProps 从 Firebase 获取一些图像，然后使用下一个图像组件显示它们。但是，它们需要一段时间才能显示，如何在它们尚未加载时显示占位符？
在 @canary 分支上有一个实验性合并 pull request。如果您想尝试一下，只需在最新发布的金丝雀上更新您的 nextjs 版本。
只需在 Image 组件上添加一个新的 placeholder="blur" 道具。
或者你可以使用这个 package。
编辑：Nextjs 11 现已正式发布 <Image> 组件的 placeholder='blur' 道具。您可以阅读 here 有关此图像占位符的更多信息。确保通过 运行 npm i next@latest react@latest react-dom@latest
更新 nextjs、react、react-dom 版本
使用 placeholder 属性，图像加载时使用的占位符，可能的值为 blur 或 empty。默认为 empty.
当blur时，blurDataURL属性将被用作占位符。如果 src 是来自静态导入的对象并且导入的图像是 jpg、png 或 webp，则 blurDataURL 将自动填充。
请注意，对于动态图像，您必须 提供blurDataURL 属性。
“blurDataURL”的内容 属性 应该是一个小数据 URL 来表示图像。
我正在使用 getStaticProps 从 Firebase 获取一些图像，然后使用下一个图像组件显示它们。但是，它们需要一段时间才能显示，如何在它们尚未加载时显示占位符？
在 @canary 分支上有一个实验性合并 pull request。如果您想尝试一下，只需在最新发布的金丝雀上更新您的 nextjs 版本。
只需在 Image 组件上添加一个新的 placeholder="blur" 道具。
或者你可以使用这个 package。
编辑：Nextjs 11 现已正式发布 <Image> 组件的 placeholder='blur' 道具。您可以阅读 here 有关此图像占位符的更多信息。确保通过 运行 npm i next@latest react@latest react-dom@latest
使用 placeholder 属性，图像加载时使用的占位符，可能的值为 blur 或 empty。默认为 empty.
当blur时，blurDataURL属性将被用作占位符。如果 src 是来自静态导入的对象并且导入的图像是 jpg、png 或 webp，则 blurDataURL 将自动填充。
请注意，对于动态图像，您必须 提供blurDataURL 属性。
“blurDataURL”的内容 属性 应该是一个小数据 URL 来表示图像。