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>