Skip to the content.

Vue Lazzy Image Component

npm install vue-lazzy-image

How to use lib

import CoreLazyLoading from 'vue-lazzy-image'
...
components: {
  CoreLazyLoading,
},

Template

<CoreLazyLoading>
    <img src="your_image_link" class="your_class_name" alt="your_alt_name" />
</CoreLazyLoading>

Component props

Parameters, which you can pass to vue-lazzy-image component.

Property Type Description
skeleton boolean Visibility of your skeleton
placeholder object The placeholder which will be provided has src and class in its properties. The placeholder will be the image before loading the main one
options object Options of IntersctionObserver constructor for your images’ parent element

Options

<CoreLazyLoading :placeholder="{ class: 'className', style: 'height: 200px;' }">
  <img
    src="your_image_link"
    class="your_class_name"
    alt="your_alt_name"
  />
</CoreLazyLoading>

Visible Skeleton

<CoreLazyLoading :placeholder="{ class: 'className', style: 'height: 200px;' }" :skeleton="false">
  <img
    src="your_image_link"
    class="your_class_name"
    alt="your_alt_name"
  />
</CoreLazyLoading>