vue-img-src

Getting started

Install via npm

# for vue 2.x
npm install [email protected] -S
# for vue 3.x
npm install [email protected] -S

Install as a Vue plugin

import VueImgSrc from 'vue-img-src'
Vue.use(VueImgSrc, {
  appendQuery: 'format=webp',
})

Using in Vue template

<!-- Directive v-src -->
<img v-src src="http://a.com/a.jpg" >
<!-- rendered dom <img src="http://a.com/a.jpg?format=webp"> -->

<!-- Filter webp 确保此时 imgSrc 为绝对地址-->
<img src="default.png" :data-src="imgSrc | src">

<!-- Method Vue.prototype.toSrc 确保此时 imgSrc 为绝对地址 -->
<img src="toSrc(imgSrc)" >

Default Option

| Name | Type | Default | Description | |-----------------------|----------|---------|--------------------------------------| | updateFunc | function | null | 自定义改变 src 的方法 | | appendQuery | string | '' | 追加到 src 末尾的 url 字符串参数 | | append | string | '' | 追加到 src 末尾的字符串 | | replaceExt | string | '' | 替换换扩名，如 .webp | | appendOnlySupportWebp | boolean | false | 是否只有浏览器支持 webp 图片时才追加 | | methodName | string | 'convertSrc' | Vue prototype 方法名称 | | directiveName | string | 'src' | Vue directive 名称 | | onerror | function | null | Element 加载失败时的 handler | | onload | function | null | Element 加载成功时的 handler | | disabled | boolean | false | 禁用所有设置，原样返回 src |