Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

@femessage/v-img

1.5.0 • Public • Published

v-img

Build Status NPM Download NPM Version NPM License PRs Welcome Automated Release Notes by gren

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
    • Alibaba
    • 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

⬆ 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):

ColMugX
ColMugX

💻 📖 ⚠️ 🌍
Donald Shen
Donald Shen

💻 ⚠️ 📖 👀
EVILLT
EVILLT

💻 ⚠️ 📖
Han
Han

💻 🐛
Cold Stone
Cold Stone

📖
levy
levy

📆 🤔

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

⬆ Back to Top

License

MIT

⬆ Back to Top

Install

npm i @femessage/v-img

DownloadsWeekly Downloads

33

Version

1.5.0

License

MIT

Unpacked Size

99.2 kB

Total Files

12

Last publish

Collaborators

  • avatar