如何将 blurha.sh 与新的 Next.JS 图像组件一起使用答案

【问题标题】：How to use blurha.sh with new Next.JS Image Component如何将 blurha.sh 与新的 Next.JS 图像组件一起使用
【发布时间】：2021-09-07 19:24:52
【问题描述】：

知道如何在 Next.JS 11 中使用 https://nextjs.org/blog/next-11#image-placeholders 上宣布的 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
/>

干杯，

【问题讨论】：

如果您的横幅是动态的，您需要使用第三方库，例如 plaiceholder。如果是StaticImage（即import banner from '../some/src'，那么Next.js 将自动为您生成blurDataURL。此问题跟踪您提到的Next.js 11 新功能。如果您正在寻找，值得一读其他解决方案：github.com/vercel/next.js/issues/18858

标签： next.js

【解决方案1】：

您需要一个为每个动态图像生成blurHash 的后端服务。我认为没有比使用 BlurHash 的typescript client 之类的东西生成画布更简单的方法，然后使用.toDataURL() 将画布转到dataURI。

【讨论】：

【解决方案2】：

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

（仍在进行中，但可以正常使用）

https://blurred.dev

【讨论】：

【解决方案3】：

我刚刚创建了一个自定义挂钩来解决这个问题。 It's here.

你只需要这样做：

const [blurData] = useNextBlurhash(bannerBlurHash);

然后将blurData传递给你的图片

【讨论】：