Dj-vue-webp NPM

使用方法

安装

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' }`