πΈ use webp and lazyload images
npm install @femessage/v-img





This component aims to replace native img element and use webp!
- Features
- Install
- Usage
- Links
- Contributing
- Contributors
- License
- Input jpg/png, output webp(svg/gif not be processed)
- Automatically check whether your browser support webp and use it
- Support cloud image service
- [x] Alibaba Cloud
- [x] Huawei Cloud
- [x] Qiniu Cloud
- Support SSR
``bash`
yarn add @femessage/v-img
`vue`
The component use provider to choose image processing strategy, here are available values:
- alibaba(default value, and it's compatible with Huawei Cloud)
- qiniu
- self
- none
---
- Alibaba OSS services are used by default, so if you host images on Alibaba OSS, provider can be omitted, this means jpg/png on Alibaba OSS, you can get webp when using v-img
- When provider=self, means you host images on your server(like Nginx), this needs you need to prepare a webp file for each image, for example:
`sh`
images/
avatar.png # your original image file
avatar.png.webp # webp file need to be generated
look at this article to see how to use node.js to generate webp from jpg/png
- When provider=none, it only enable lazyload images function
You'd better set image's width or height attribute(like 100, not 100px) to make sure lazyload function can work correctly
The lazyload` function is supported by lazysizes, and it is auto enabled.
- api
- design doc
- webp
- alibaba oss guide
- qiniu images processing doc
- how to scale svg from center
- more about scaling svg
For those who are interested in contributing to this project, such as:
- report a bug
- request new feature
- fix a bug
- implement a new feature
Please refer to our contributing guide.
Thanks goes to these wonderful people (emoji key):
ColMugX π» π β οΈ π | Donald Shen π» β οΈ π π | EVILLT π» β οΈ π | Han π» π | Cold Stone π | levy π π€ | 4Ark π» |
This project follows the all-contributors specification. Contributions of any kind welcome!