Vue component for showing loader while image loading

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.


Install component via NPM

npm install vue-load-image --save


here is sample template which shows loader while image loading.

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


call the component and enable functionality.

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

See live demo and download source code.


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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.