vue-img-src

Getting started

Install via npm

# for vue 2.x
npm install vue-img-src@1.x -S
# for vue 3.x
npm install vue-img-src@2.x -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