Awesome image component for vue2 & vue3 & nuxt. Lazyload / Responsive / Progressive / WebGL Filter / WebGL Transition / WebP

Overview

中文

AwesomeImage is a universal image component that supports lazy/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.

Document

AwesomeImage

Features

  • 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 before hydrate. And compatible with the progressive effect, improve the first screen loading experience

  • WEBP compatibility —— you can use the auto-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 in AsImage component to processe image More

  • WebGL transition —— you can use the webgl image transition component AsTransition to switch image with awesome webgl effect. Support GLTransitions and custom WebGL image transitions More

  • 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 functions More

Demo

Demo

Show Case

Lazy / Responsive / Progressive / SSR

WebGL Filter (@awesome-image/filter-fake3d)

WebGL Transition

Development

Installation

pnpm i

Build workspace

pnpm run build

Develop 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
You might also like...
:camera: Mini Image Lazy Loader for P(R)eact and Vue
:camera: Mini Image Lazy Loader for P(R)eact and Vue

Pimg is a Progessive Image Component For React, Preact and Vue.js. It helps in lazy loading of images in a nice and cool way. It's 2KB (gzipped). It h

A small lazy image loader for Vue

lazy-vue lazy-vue is the easiest way to get a lazy image loader working within your vue projects. It is meant to be as simplest as possible, so you do

A super simple image lazy loader for Vue.

cube-vue-image-lazy A super simple image lazy loader for Vue. Install yarn add cube-vue-image-lazy Warning: You'll need to install the w3c Intersectio

Vue 2 image and video loader supporting lazy loading, background videos, fixed aspect ratios, low rez poster images, transitions, loaders, slotted content and more.

Vue Visual Vue 2 image and video loader supporting lazy loading. Visual 2.x is a simplification of Version 1.x with a greater reliance on modern brows

Create lazy image, embed, video and element with animation just with attributes.

📖 Lazy-attr v1.2.3 Create lazy loading request or element like image, iframe, video... Make custom animation on lazy and not lazy element on all brow

A Vue/Nuxt component that allows you to lazily render components only when they are scrolled into the viewport.

nuxt-render-on-scroll nuxt-render-on-scroll - A Vue/Nuxt component that allows you to lazily render components only when they are scrolled into the vi

Component-based lazy (CLazy) load images in Vue.js 2

Vue Clazy Load Claziest lazy loader out there! Component-based image lazy loader for Vue.js 2 Swaps between your image and another component when load

A simple lazy-load list component based Vue 2.x: https://dwqs.github.io/v2-lazy-list/

v2-lazy-list A simple lazy-load list component based Vue 2.x, which will be on-demand rendering the list based container element's viewport. v1.x is n

Vue.js component for lazyloading YouTube videos.
Vue.js component for lazyloading YouTube videos.

vue-lazy-youtube-video 1.x documentation can be found here. vue-lazy-youtube-video Features Installation Via NPM Via Yarn Directly in browser Initiali

Owner
Phil Xu
threejs / 3D print / vue / angular / nodejs
Phil Xu
A plugin of vue for image lazyload(vue图片懒加载插件)

中文文档看这里 Update v2.1.0 Add requestAnimationFrame polyfill. Now img lazyload detects horizontal direction automatically Imporve perfomence, since the sc

zhaoyenb 251 Aug 29, 2022
Vue image lazyload directive

Vue image lazyload directive

alex koh 0 Nov 3, 2020
Vue progressive image loading plugin

vue-progressive-image Vue progressive image loading plugin Installation $ npm install vue-progressive-image Usage import Vue from 'vue' import VueProg

Matteo Gabriele 708 Sep 30, 2022
A lazyload plugin for Vue.js v2.x+.

vue-l-lazyload A lazyload and in-view detection plugin for Vue.js v2.x+. Demo Live demo or npm install vue-l-lazyload && npm run startDev to play it!

Light Leung 26 Mar 9, 2022
Vue Plugin for vanilla-lazyload

lazyload-vue Vue Plugin for vanilla-lazyload Build status: features Simple usage with v-lazy-src Accepts options Vue.use(LazyloadVue, options) Multipl

Kazap Tecnologia 29 Jul 14, 2022
Vue.js Image Kit Component with Lazy Load built in and Responsive Images

Vue Image Kit Vue.js Image Kit Component with Lazy Load built in and Responsive Images The inspiration comes from this and a talk from @derevandal in

Igor Guastalla 9 Mar 31, 2022
Vue.js lazy load image directive with akamai image converter

vue-lazyload-akamai Vue.js lazy load image directive with akamai image converter ??

Blibli.com 2 Aug 13, 2018
A Vue.js component to load an image automatically when it enters the viewport.

A Vue.js component to load an image automatically when it enters the viewport.

Ali Sarfaraz 0 Mar 29, 2020
A plugin of lazy-load images for Vue2.x

vue-lazyload-images A plugin of lazy-load images for Vue2.x Support images lazyload in window or build-in element. Demo Installation npm $ npm install

LowesYang 60 Mar 28, 2022
simplistic vue.js directive for image lazy loading

Vue Progressive Image Lazy load images while showing a preview. Super tiny, less than half a kilobyte minified and gzipped. usage v-lazy-img adds the

Norman 25 Aug 11, 2021