简介
AwesomeImage 是一个支撑懒加载/渐进加载/呼应加载/主动webp、兼容vue2/vue3/nuxt的通用图片组件。
别的可搭配官方WebGL滤镜库或自定义WebGL滤镜组件、WebGL过渡组件实现更酷炫的图片展示或按钮作用。
特性
- 懒加载 —— 别离设置图片和placeholder加载机遇
- 呼应式加载 —— 依据屏幕宽度加载不同尺度图片
- 渐进式加载 —— 加载宽度为48px含糊缩率图作为placeholder，而且加载进程滑润过渡
- SSR —— 支撑服务端烘托，关于首屏图片指定非懒加载，能够在
灌水前加载图片，并兼容渐进作用，提高首屏加载体会 - webp兼容 —— 运用不支撑主动webp的图片服务时，能够运用autoWebp参数增加webp兼容写法
- WebGL滤镜 —— 能够在图片组件AsImage内运用滤镜组件，支撑自定义WebGL图片处理作用More
- 轮播过渡 —— 能够运用轮播图片过渡组件AsTransition，支撑GLTransitions过渡作用，支撑自定义WebGL图片过渡作用More
- 自定义图片处理 —— @awesome-image/services内置fastly、upyun等图片处理规则，可自由定制其他图片url转换函数More
文档
AwesomeImage
Github
AwesomeImage收录于vuejs/awesome-vue
Demo
Nuxt3 Demo
作用
懒加载 / 渐进加载 / 呼应加载 / SSR
支撑懒加载，加载进程滑润过渡，依据屏幕宽度加载指定图片。在SSR形式下，能够在客户端代码加载完结前加载图片，而且同样拥有过渡加载作用，提高首屏加载体会。
在线修改Lazyload – Codesandbox
SSR作用Nuxt3
WebGL滤镜
能够在图片组件AsImage内运用滤镜组件，可安装多种官方滤镜，支撑自定义WebGL图片处理作用More
更多滤镜
WebGL过渡
能够运用轮播图片过渡组件AsTransition，支撑GLTransitions过渡作用，支撑自定义WebGL图片过渡作用More
在线修改AsTransition – CodeSandbox
更多内容请参考官方文档
