Vue Lazy Image Component

Vue Lazy Image is a Vue.js component to lazy-load an image automatically when it enters the viewport using the Intersection Observer API.

Using Vue Lazy Image is convenient to not have to dive into the inner-workings of building a lazy image loader from scratch:

1<template>
2  <v-lazy-image src="http://lorempixel.com/400/200/" />
3</template>

Here's a more complex example which illustrates some neat features like srcset:

 1<v-lazy-image
 2    class="picture-demo"
 3    srcset="
 4        https://cdn-images-1.medium.com/max/400/1*xjGrvQSXvj72W4zD6IWzfg.jpeg 400w,
 5        https://cdn-images-1.medium.com/max/800/1*xjGrvQSXvj72W4zD6IWzfg.jpeg 800w
 6        https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg 1600w
 7      "
 8    sizes="(max-width: 150px) 200px, 400px, 800p"
 9    src="https://cdn-images-1.medium.com/max/800/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
10    use-picture
11/>

As you can see in the above example, this package includes powerful features in a simple-to-use API:

• Support for Vue 2 and Vue 3
• Automatic lazy images using the Intersection Observer API
• Responsive images using srcset
• Progressive image loading using the src-placeholder attribute (read more)
• Events for intersect, load and error

Your app will also likely see immediate performance gains since images will only load as they scroll into view.

You can learn more about this package, get full installation instructions, and view the source code on GitHub. The repo includes a playground for both Vue 2 and Vue 3 if you'd like to see some examples.