https://github.com/newbeea/awesome-image
Awesome image component for vue2 & vue3 & nuxt. Lazyload / Responsive / Progressive / WebGL Filter / WebGL Transition / WebP
https://github.com/newbeea/awesome-image
lazyload nuxt nuxt3 progressive resoponsive vue vue2 vue3 webgl-filter webgl-transition webp
Last synced: 7 months ago
JSON representation
Awesome image component for vue2 & vue3 & nuxt. Lazyload / Responsive / Progressive / WebGL Filter / WebGL Transition / WebP
- Host: GitHub
- URL: https://github.com/newbeea/awesome-image
- Owner: newbeea
- Created: 2022-03-29T11:10:54.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-05-19T07:32:00.000Z (almost 4 years ago)
- Last Synced: 2025-08-10T18:07:31.683Z (7 months ago)
- Topics: lazyload, nuxt, nuxt3, progressive, resoponsive, vue, vue2, vue3, webgl-filter, webgl-transition, webp
- Language: Vue
- Homepage:
- Size: 14.3 MB
- Stars: 65
- Watchers: 3
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - awesome-image - An universal image component for Vue2 / Vue3 / Nuxt with Lazyload / Responsive / Progressive / Auto-WebP / WebGL Filter / WebGL Transition supported. (Components & Libraries / UI Components)
README
[中文](README.zh.md)
[AwesomeImage](https://awesome-image.vercel.app) 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](https://awesome-image.vercel.app)
## 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](https://awesome-image.vercel.app/filter/introduction)
- WebGL transition —— you can use the webgl image transition component `AsTransition` to switch image with awesome webgl effect. Support [GLTransitions](https://gl-transitions.com/) and custom WebGL image transitions [More](https://awesome-image.vercel.app/transition/introduction)
- 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](https://awesome-image.vercel.app/url)
## Demo
[Demo](https://awesome-image-demo.vercel.app)
## 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
```