Load images easy using Lazy load with Vue 2

vue-lazy-background-images

Lazy Background Images for Vue 2, is a component which can help you load images directly using a URL or loading them dynamically. It provides a set of values which can be used to configure how the image will display:

Values

  • image-source - The source of the desired image (required)
  • loading-image - Path to the loader image (png, svg etc) (required)
  • error-image - Path to the error image (required)
  • image-class - Any classes you wish to include on the image (optional)
  • background-size - CSS background-size value (optional, default is cover)
  • image-success-callback - Function on success (optional)
  • image-error-callback - Function on error (optional)

Example:

Installation

npm install --save-dev vue-lazy-background-images

Usage

main.js

import VueLazyBackgroundImages from 'vue-lazy-background-images'

Register the component

Vue.component('lazy-background', VueLazyBackgroundImages)

You can add your own values directly in the template or bind them

App.vue

<lazy-background
    // binding
    :image-source="backgroundImage"
    :loading-image="loadingImage"
    // direct link or path
    error-image="/img/error.png"
    image-class="img-responsive"
    >
</lazy-background>

...
// script
data () {
    return {
      backgroundImage: 'https://vuejsfeed.com/img/vuejsfeed-medium.png',
      loadingImage: 'http://i.imgur.com/5XiyiYw.jpg'
    }
  },

The code is available on GitHub.

This component is only for background images and does not support anything other than that.