vue-img-tag

Repository

https://github.com/livelybone/vue-img-tag

Normal Apply

Example

Code

new Vue({
el: '#nor',
template: '<img-tag class="img-tag"' +
' loadingImg="./loading.gif"' +
' errorImg="./error.jpg"' +
' :src="img"' +
' :preventValue="-10"' +
' @load="log"/>',
data: function () {
return {
img: 'http://pic1.win4000.com/wallpaper/2018-11-26/5bfb63c4d1860.jpg'
}
},
methods: {
log: function (val) {
console.log(val)
}
},
components: { 'img-tag': VueImgTag }
})

Input file

Example

Just for showing input file

Code

var img = new Vue({
el: '#file',
template: '<img-tag v-if="img" class="img-tag"' +
' loadingImg="./loading.gif"' +
' errorImg="./error.jpg"' +
' :src="img"' +
' @load="log"/>',
data: function () {
return {
img: ''
}
},
methods: {
log: function (val) {
console.log(val)
}
},
components: { 'img-tag': VueImgTag }
})

document.getElementById('input').addEventListener('change', function (ev) {
img.img = ev.target.files[0]
console.log(img.img)
})

Lazy load

Example

Code

new Vue({
el: '#lazy',
template: '<img-tag class="img-tag lazy-img"' +
' loadingImg="./loading.gif"' +
' errorImg="./error.jpg"' +
' lazy' +
' :src="img"' +
' :preventValue="-100"' +
' @load="log" ref="img"/>',
data: function () {
return {
img: 'https://justifiedgrid.com/wp-content/uploads/life/biking/137646854.jpg'
}
},
methods: {
log: function (val) {
console.log(val)
}
},
components: { 'img-tag': VueImgTag }
})