This component aims to replace native img element and use webp!
Table of Contents
- Input jpg/png, output webp(svg/gif not be processed)
- Automatically check whether your browser support webp and use it
- Support cloud image service
yarn add @femessage/v-img
<v-img :src="src" width="100" />
The component use
provider to choose image processing strategy, here are available values:
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
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 fileavatar.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
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
lazyload function is supported by lazysizes, and it is auto enabled.
- design doc
- 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):
💻 📖 ⚠️ 🌍
💻 ⚠️ 📖 👀
💻 ⚠️ 📖
This project follows the all-contributors specification. Contributions of any kind welcome!