v-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
  • [x] Qiniu

⬆ Back to Top

Install

yarn add @femessage/v-img

⬆ Back to Top

Usage

<v-img :src="src" width="100" />

provider

The component use provider to choose image processing strategy, here are available values:

• alibaba(default)
• 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:

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

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.

⬆ Back to Top

Links

• api
• design doc
• webp
• alibaba oss guide
• qiniu images processing doc
• how to scale svg from center
• more about scaling svg

⬆ Back to Top

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.

⬆ Back to Top

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

⬆ Back to Top

License

MIT

⬆ Back to Top