next.js - 如何将 blurha.sh 与新的 Next.JS 图像组件一起使用

Question

知道如何在 Next.JS 11 中使用图像组件中的新模糊占位符，正如在 https://nextjs.org/blog/next-11#image-placeholders 上宣布的那样？

<Image
 src={banner}
 alt={name}
 layout="responsive"
 width={1920}
 height={675}
 quality={100}
 placeholder="blur"
 blurDataURL={bannerBlurHash} // Here bannerBlurHash code as data url ?
 priority
/>

干杯，

Answer 1

我构建了一个快速实用程序，用于从输入图像生成 blurhash 的数据 URL 并使用 blurhash 参数。生成的数据 URL 可以用作 Next.js Image 的 blurDataURL

(仍在进行中，但功能正常)

https://blurred.dev