@femessage/v-img
v1.10.2TypeScript
πΈ use webp and lazyload images
24/weekUpdated 3 years agoMITUnpacked: 126.0 KB
Published by https://github.com/FEMessage
npm install @femessage/v-imgv-img
This component aims to replace native img element and use webp!
Table of Contents
- Features
- Install
- Usage
- Links
- Contributing
- Contributors
- License
Features
- 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
Install
``bash`
yarn add @femessage/v-img
Usage
`vue`
$3
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
$3
You'd better set image's width or height attribute(like 100, not 100px) to make sure lazyload function can work correctly
$3
The lazyload` function is supported by lazysizes, and it is auto enabled.
Links
- api
- design doc
- webp
- alibaba oss guide
- qiniu images processing doc
- how to scale svg from center
- more about scaling svg
Contributing
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.
Contributors
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!