vue-load-image is 3KB minimalist Vue component that display loader during image loading, as well as by display alternate content when the image fails to load.
vue-image-loader

Install

Install component via NPM

npm install vue-load-image --save



HTML

here is sample template which shows loader while image loading.

<template>
  <div>
    <vue-load-image>
      <img slot="image" src="./image.png"/>
      <img slot="preloader" src="./image-loader.gif"/>
      <div slot="error">error message</div>
    </vue-load-image>
  </div>
</template>



JS

call the component and enable functionality.

<script>
// es6
import VueLoadImage from 'vue-load-image'
// es5
var VueLoadImage = require('vue-load-image').default
 
export default {
  components: {
    'vue-load-image': VueLoadImage
  }
}
</script>

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by john015. Visit their official github repository for more information and follow for future updates.