使用方法

安装

npm i dj-vue-webp --save-dev

引入并加载

import VueWebp from 'dj-vue-webp'
  
// default config，一般项目里这样用就行了
Vue.use(VueWebp)
  
// custom config
Vue.use(VueWebp, {
    isCDN: /(static.daojia.com|static.djtest.cn)/,  //图片url满足该正则条件，才会用filter过滤
    filter(src) {
        return src.replace('.png', '.webp')         //filter函数
    }
})

指令

<img v-webp="//images.daojia.com/1.png">
<div v-webp.bg="//images.daojia.com/1.png"></div>

API

Vue.use(VueWebp, options)

options

|字段|类型|说明|默认值| |----|----|----|------| |isCDN| RegExp| 用于判断需要替换为webp的图片域名的正则表达式，若要匹配所有域名，可将其配置为/./ | /(images.daojia.com\丨images.djtest.cn)/ | |filter |Function |用于将普通图片url修改为webp图片的url，入参为图片url，返回值为图片webp格式对应url |function(src) { return src.indexOf('@') > -1 ? src + '.webp' : src + '@.webp' }|

modifiers

.bg图片作为元素背景图展示