A Vue component for showing loader during image loading

Vue-load-image

Vue-load-image is 1KB(gzipped size) minimalist Vue component that display loader during image loading and display alternate content when the image fails to load.

Installation

Via NPM:

npm i vue-load-image

Via CDN:

<script src='https://unpkg.com/vue-load-image'></script>

Usage

Img

<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>

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

export default {
  components: {
    'vue-load-image': VueLoadImage
  }
}
</script>

Background-image

<template>
  <div>
    <vue-load-image>
      <div slot="image" style="background-image: url(./image.png)" data-src='./image.png' />
      <img slot="preloader" src="./image-loader.gif" />
      <div slot="error">error message</div>
    </vue-load-image>
  </div>
</template>

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

export default {
  components: {
    'vue-load-image': VueLoadImage
  }
}
</script>

Notice

Set data-src to be the same as background-image url

Events

Name	Description
onError	onError gets triggered when the image fails to load.
onLoad	onLoad gets triggered when the image is loaded.

Slots

"image" slot will be rendered when the image is successfully loaded

"preloader" slot will be rendered when the image is in the process of loading

"error" slot will be rendered when the image load fails.

Download Details:

Author: john015

Live Demo: https://john015.github.io/vue-load-image/

GitHub: https://github.com/john015/vue-load-image

#vuejs #vue #vue-js #javascript