如何将blura.sh与new Next一起使用.JS图像组件

Question

关于如何使用的任何想法，请参阅Next。JS 11，图片组件的新模糊占位符，如上所述https://nextjs.org/blog/next-11#image-占位符？

<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，并使用blurash参数。生成的数据URL可以用作Next.js Image的blurDataURL

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

https://blurred.dev

Answer 2

我刚刚创建了一个自定义钩子来解决这个问题。它在这里。

你只需要做这样的事情：

const [blurData] = useNextBlurhash(bannerBlurHash);

然后将blurData传递给您的图像

Answer 3

您需要一个为每个动态映像生成blurHash的后端服务。我认为没有比用BlurHash的typescript客户端生成画布更简单的方法了，然后用.toDataURL()将画布转换为dataURI。