我正在使用getStaticProps从Firebase获取一些图像，然后将它们与下一个Image组件一起显示。但是，它们需要一段时间才能显示，在它们尚未加载的情况下，如何显示占位符？
在另一个@canary分支上有一个实验性的合并拉取请求。如果你想尝试一下，只需在最新发布的canary上更新你的nextjs版本。只需在Image组件上添加一个新的placeholder="blur"道具。
或者你可以使用这个软件包。
编辑：Nextjs 11现在已经正式发布了<Image>组件的placeholder='blur'道具。你可以在这里阅读更多关于这个图片占位符的信息。确保通过运行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来表示图像。