Lightweight Image/Picture lazyload based on Intersection API

import Vue from 'vue'
import VueLazy from 'vue-lazy'
import 'vue-lazy/dist/vue-lazy.css'

Vue.use(VueLazy)

import { LazyImage } from 'vue-lazy'
import 'vue-lazy/dist/vue-lazy.css'

export default {
  components: {
    LazyImage
  }
}

<lazy-image
  src="https://via.placeholder.com/250"
  alt="example aternative text"
/>

<lazy-image
  src="https://via.placeholder.com/250"
  alt="example aternative text"
  width="250"
  height="250"
/>

<picture>
  <source media="(min-width:1366px)" srcset="https://via.placeholder.com/1360x300">
  <source media="(min-width:1024px)" srcset="https://via.placeholder.com/1024x300">

  <lazy-image
    src="https://via.placeholder.com/250"
    alt="example aternative text"
  />
</picture>