Light-weight image loader for Vue.js version 2.x and 3.x – vue-load-image

Category: Vue.js Vue.js Loaders | August 19, 2021
Author: john015
Official Page: Go to website
Last Update: August 19, 2021
License: MIT

vuejs image loader

Description:

vue-load-image is light-weight, simple to use image loader for Vue.js. It will display loader during image loading.

You may also like:

How to install and use it?

1. Install the component with npm.

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

# for Vue 3.x
npm i [email protected]

2. Import the required components.

import VueLoadImage from 'vue-load-image'

3. Register the image loader component.

export default {
  components: {
    'vue-load-image': VueLoadImage
  }
}

4. Add the loader component in your template file.

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