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 }
})
Just for showing input file
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)
})
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 }
})