javascript - 下载时如何在 NextJS 中呈现图像的模糊版本？

Question

我正在寻找与以下类似的效果:



我对 Gatsby 做过类似的事情，但我想知道 NextJS 是否可以做到这一点？

Answer 1

对于 10.2 以上的版本，Nextjs 在 Image 组件中提供了内置的模糊图像。
花了几个小时后，我发现了这个 article
首先您需要将您的 nextJs 应用程序更新到 10.2.4 或更高版本。

yarn add next@10.2.4

然后用两个额外的 Prop 实现你的 nextJs Image 组件模糊数据 URL 和 占位符 .检查下面的代码示例。

<Image
   className="image-container"
   src="/images/high-quality-image.jpg"
   width={250}
   height={240}
   quality={75}
   blurDataURL="/images/path-to-blur-image.jpg"
   placeholder="blur"
/>