Skip to content

Latest commit

 

History

History
63 lines (46 loc) · 2.32 KB

README.zh.md

File metadata and controls

63 lines (46 loc) · 2.32 KB
Raw

English

AwesomeImage 是一个支持 懒加载 / 渐进加载 / 响应加载 / 自动webp、兼容 vue2 / vue3 / nuxt 的通用图片组件。

另外可搭配官方WebGL滤镜库或自定义WebGL滤镜组件、WebGL过渡组件实现更酷炫的图片展示或按钮效果。

文档

AwesomeImage

特性

  • 懒加载 —— 分别设置图片和placeholder加载时机
  • 响应式加载 —— 根据屏幕宽度加载不同尺寸图片
  • 渐进式加载 —— 加载宽度为48px模糊缩率图作为placeholder，并且加载过程平滑过渡
  • SSR —— 支持服务端渲染，对于首屏图片指定非懒加载，可以在 注水 前加载图片，并兼容渐进效果，提升首屏加载体验
  • webp兼容 —— 使用不支持自动webp的图片服务时，可以使用autoWebp参数添加webp兼容写法
  • WebGL滤镜 —— 可以在图片组件AsImage内使用滤镜组件，支持自定义WebGL图片处理效果 More
  • 轮播过渡 —— 可以使用轮播图片过渡组件AsTransition，支持GLTransitions过渡效果，支持自定义WebGL图片过渡效果 More
  • 自定义图片处理 —— @awesome-image/services内置fastly、upyun等图片处理规则，可自由定制其他图片url转换函数 More

Demo

Demo

效果

懒加载 / 渐进加载 / 响应加载 / SSR

WebGL滤镜 (@awesome-image/filter-fake3d)

WebGL过渡

开发

安装

pnpm i

构建 workspace

pnpm run build

开发子 package

// @awesome-image/image
pnpm -C ./packages/image/ dev

// @awesome-image/transition
pnpm -C ./packages/transition/ dev

// @awesome-image/services
pnpm -C ./packages/services/ dev

// @awesome-image/filter-glitch
pnpm -C ./packages/filters/glitch/ dev