AwesomeImage： 支持 懒加载 / 渐进加载 / 响应加载 / WebGL滤镜 、兼容 vue2 / vue3 的通用图片组件

简介

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

更多内容请参考官方文档