DEV Community
·
Blurhash与Directus：如何添加模糊图像加载
内容提要
Blurhash是一种紧凑的图像文本表示，能在原图加载前提供模糊预览，提升用户体验。通过directus-extension-blurhasher插件，用户可自动生成和存储Blurhash，并支持不同的细节级别。安装后，Directus会新增设置，允许在重启时重新生成Blurhash，前端可使用生成的Blurhash字符串展示模糊预览。
关键要点
-
Blurhash是一种紧凑的图像文本表示，能在原图加载前提供模糊预览，提升用户体验。
-
通过directus-extension-blurhasher插件，用户可自动生成和存储Blurhash，并支持不同的细节级别。
-
安装插件后，Directus会新增设置，允许在重启时重新生成Blurhash。
-
用户可以选择细节级别（低、中、高），影响Blurhash字符串的长度和处理速度。
-
插件安装后，任何文件请求都会返回包含生成的Blurhash字符串的新字段。
-
生成的Blurhash字符串可在前端展示模糊预览，提升用户体验。
-
支持项目在GitHub上，并分享集成经验。
延伸解读
Blurhash的用户体验提升
Blurhash技术通过提供模糊预览，显著改善了用户在等待图像加载时的体验。这种视觉上的吸引力不仅让界面更具响应性，还能减少用户的焦虑感，尤其是在网络速度较慢的情况下。
插件的灵活性与配置
使用directus-extension-blurhasher插件，用户可以根据需求选择不同的细节级别（低、中、高），这直接影响到Blurhash字符串的长度和生成速度。合理配置这些选项可以在性能与视觉效果之间找到最佳平衡。
自动重生成的便利性
插件提供的重启时自动重生成Blurhash功能，确保了所有已上传图像的预览始终保持最新。这一特性对于需要频繁更新内容的项目尤为重要，能够减少手动维护的工作量。
延伸问答
什么是Blurhash，它有什么用？
Blurhash是一种紧凑的图像文本表示，能够在原图加载前提供模糊预览，提升用户体验。
如何在Directus中安装directus-extension-blurhasher插件？
通过Docker安装时，在Dockerfile中添加相关代码，或在Directus的fork中使用npm安装，然后重启Directus即可。
使用directus-extension-blurhasher插件有什么好处？
该插件自动生成和存储Blurhash，支持不同的细节级别，提升图像加载的用户体验。
Blurhash的细节级别如何影响生成的字符串？
细节级别（低、中、高）影响Blurhash字符串的长度和处理速度，级别越高，模糊效果越准确，但处理时间也更长。
安装插件后，Directus中新增了哪些设置？
新增的设置包括Blurhasher细节级别和重启时重新生成Blurhash的选项。
如何在前端展示生成的Blurhash字符串？
可以使用生成的Blurhash字符串在前端展示模糊预览，支持多种框架如Next.js和Flutter。
