vue-webp-plugin

a directive of vuejs make it easily to use image of webp format.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-webp-plugin
1.0.24 years ago4 years agoMinified + gzip package size for vue-webp-plugin in KB

Readme

vue-webp-plugin

make it easily to use webp format image, both src and backgrund-image support~

features

1. base64格式的图片资源自动忽略webp
2. both support src and background-image(allways use this to support background-image in stylesheet)
3. auto use orginal format(e.g png, jpg ...) when the webp format loading failed.

how to use

install vue-webp-plugin

npm install --save vue-webp-plugin
//or
yarn add vue-webp-plugin

use plugin to Vue

...
import WebpPlugun from 'vue-webp-plugin';
Vue.use(WebpPlugun);

in your component

  1. src方式使用远程图片
<img v-webp="'https://h5.u51.com/99fenqi/vue//static/home_top_bg.png'"/>
  1. src方式使用本地图片
<img v-webp="require('static/home_top_bg.png')"/>
  1. use an variable
<img v-webp="url"/>
<script>
    export default {
        data() {
            return {
                url: require('static/home_top_bg.png')
            }
        }
    }
</script>

  1. background-image方式使用
<div v-webp:bg="require('static/home_top_bg.png')"></div>

tips

  1. 使用require引用图片资源, 这样,vue-loader可以处理它
  2. 我这边没有使用webpack对插件进行babel转码,请将本插件添加到babel-loader处理的文件序列中

resources

  1. A new image format for the Web
  2. Using WebP Images
  3. 探究WebP一些事儿