v-img
This component aims to replace native img element and use webp!
Table of Contents
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
yarn add @femessage/v-imgUsage
<v-img :src="src" width="100" />provider
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,
providercan 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:
images/
avatar.png # your original image file
avatar.png.webp # webp file need to be generatedlook 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
width/height
You'd better set image's width or height attribute(like 100, not 100px) to make sure lazyload function can work correctly
lazyload
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!