vue-img-lazy-tiny

vue-img-lazy-tiny

A Tiny img lazy load vue directive

Usage

Install it with npm or other package manager

$ npm install vue-img-lazy-tiny

Register vue directive

import vilt from 'vue-img-lazy-tiny'

createApp(App)
  .use(vilt)     // install vilt
  .mount('#app')

Use it in your template, your image will be lazy loaded.

<script setup lang="ts">
  const url = 'https://avatars.githubusercontent.com/u/59404696?v=4'
</script>

<div>
  <img v-lazy="url"/>  
</div>

Preview

The directive will provide a sheild element to cover the original image, and a loading spinner.

https://peterroe.github.io/vue-img-lazy-tiny/