Repository files navigation

中文

AwesomeImage is a universal image component that supportslazy/progressive/responsive/automatic webp which compatible with Vue2/Vue3/NUXT.

It can also be paired with the official WebGL filter library or a custom WebGL filter component, or the WebGL transition component for an awesome image display or button effect.

AwesomeImage

• Lazy loading —— set when to load the image and placeholder image separately

• Responsive loading —— load images of different sizes based on screen width

• Progressive loading —— load a 48px blured image as placeholder, then display the image smoothly

• SSR —— support server-side rendering, if specify non-lazy loading for the first screen, it will load the images beforehydrate. And compatible with the progressive effect, improve the first screen loading experience

• WEBP compatibility —— you can use theauto-webp property to add a webp compatible notation when using an image service that does not support automatic webp

• WebGL filter ——WebGL Filter Component can be used inAsImage component to processe imageMore

• WebGL transition —— you can use the webgl image transition componentAsTransition to switch image with awesome webgl effect. SupportGLTransitions and custom WebGL image transitionsMore

• Custom image url generator —— @awesome-image/services has built-in image url generator rules such as fastly and upyun, you can customize other image url generator functionsMore

Demo

pnpm i

pnpm run build

// @awesome-image/imagepnpm -C ./packages/image/ dev// @awesome-image/transitionpnpm -C ./packages/transition/ dev// @awesome-image/servicespnpm -C ./packages/services/ dev// @awesome-image/filter-glitchpnpm -C ./packages/filters/glitch/ dev