Vue component that display loader during image loading

Complete implementation of Vue component that display 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:

# for Vue 2.x
npm i vue-load-image 

# for Vue 3.x
npm i vue-load-image@next

Via CDN:

<!-- for Vue 2.x -->
<script src='https://unpkg.com/vue-load-image'></script>

<!-- for Vue 3.x -->
<script src='https://unpkg.com/vue-load-image@next'></script>

Usage

Image

Vue 2.x

<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>
import VueLoadImage from 'vue-load-image'

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

Vue 3.x

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

<script>
import VueLoadImage from 'vue-load-image'

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

Background-image

Vue 2.x

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

import VueLoadImage from 'vue-load-image'
export default {

  components: {

    'vue-load-image': VueLoadImage

  }

}

</script>

Vue 3.x

<template>

  <div>

    <vue-load-image>

      <template v-slot:image>

        <div style="background-image: url(./image.png)" data-src='./image.png' />

      </template>

      <template v-slot:preloader> 

        <img src="./image-loader.gif" />

      </template>

      <template v-slot:error>Image load fails</template>

    </vue-load-image>

  </div>

</template>
<script>

import VueLoadImage from 'vue-load-image'
export default {

  components: {

    'vue-load-image': VueLoadImage

  }

}

</script>