DEV Community
·
Blurhash与Directus：如何添加模糊图像加载
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
Blurhash是一种紧凑的图像文本表示，能在原图加载前提供模糊预览，提升用户体验。通过directus-extension-blurhasher插件，用户可自动生成和存储Blurhash，并支持不同的细节级别。安装后，Directus会新增设置，允许在重启时重新生成Blurhash，前端可使用生成的Blurhash字符串展示模糊预览。
🎯
关键要点
- Blurhash是一种紧凑的图像文本表示，能在原图加载前提供模糊预览，提升用户体验。
- 通过directus-extension-blurhasher插件，用户可自动生成和存储Blurhash，并支持不同的细节级别。
- 安装插件后，Directus会新增设置，允许在重启时重新生成Blurhash。
- 用户可以选择细节级别（低、中、高），影响Blurhash字符串的长度和处理速度。
- 插件安装后，任何文件请求都会返回包含生成的Blurhash字符串的新字段。
- 生成的Blurhash字符串可在前端展示模糊预览，提升用户体验。
- 支持项目在GitHub上，并分享集成经验。
❓
延伸问答
什么是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。
➡️
