Add this directive:
Vue.directive('img', {
bind: function (el, binding, vnode) {
var img = new Image();
img.src = binding.value;
img.onload = function () {
el.src = binding.value;;
$(el).css('opacity', 0).animate({opacity: 1}, 1000)
}
}
});
Call in your template:
<img src=/loading_spinner.gif" v-img="realImage">
where realImage
is the actual url of the image, and loading_spinner.gif
is what you want to show while waiting.