Skip to content
📸Use webp and lazyload images
JavaScript Vue Shell
Branch: dev
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
docs
src
styleguide
test
.all-contributorsrc
.babelrc.js
.editorconfig
.eslintrc.js
.gitignore
.prettierignore
.prettierrc
.stylelintrc
.travis.yml
LICENSE
README-zh.md
README.md
build.sh
notify.sh
package.json
styleguide.config.js
yarn.lock

README.md

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

You can’t perform that action at this time.