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

问题描述

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

标签： next.jsnextjs-image

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

或者你可以使用这个包。

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

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

问题描述

解决方案

推荐阅读