应用台导航页
  • 主页
  • 博客
  • 知识库
  • 工作台
  • 集萃
  • 友链
  • 关于
Next.js 实现图片模糊加载效果

Next.js 实现图片模糊加载效果

技术
更新于 2023-06-28
— 387 字
返回

Next.js 中,通过静态引入的方式引入的图片,只需设置 placeholder 属性为 'blur',即可实现图片的模糊加载效果。非此方式引入的图片需要设置 blurDataUrl 属性,可以通过 joe-bell/plaiceholder: Beautiful image placeholders, without the hassle. 这样的方案来生成 URL

参考: Components: <Image> | Next.js

dors logoDors

Dors 是花野猫开发为知识工作者打造的数字花园应用,包含的博客、个人记事本、及其他实用功能。

花园

  • 花坛——博客
  • 果园——知识库

工坊——作者开发的实用工具

  • 小记
  • 秒切——一键按秒分割视频
  • 中国重点高校地理位置可视化网站
  • 中国行政区划数据查询平台
  • excel 重命名工具

misc

  • 生活章程
  • 画廊
  • just have fun!

© 2022 - present. All Rights Reserved.滇ICP备2025063395号-1

花野猫打造