<template>
  <!-- Setting a fixed size is better for browser loading -->
  <!-- Replace `src` with `v-lazy` -->
  <img v-lazy="'img.jpg'" width="536" height="354" />

  <!-- Set `loading="lazy"` is not required -->
  <iframe v-lazy="'iframe.html'" loading="lazy" width="1000" height="500" />

  <!-- Load right away with set `loading="eager"` -->
  <iframe v-lazy="'iframe.html'" loading="eager" width="1000" height="500" />

  <!-- Pass in the Relative URLs like this -->
  <img v-lazy="logo" width="100" height="100" />

  <!-- Replace `srcset` with `v-lazy:set` or `v-lazy:srcset` -->
  <img v-lazy="'img.jpg'" v-lazy:set="'img.jpg 1000w, img-2x.jpg 2000w'" width="536" height="354" />

  <!-- Replace `background-image` with `v-lazy:bg` -->
  <div v-lazy:bg="logo">background</div>

  <!-- Replace `background-image: image-set` with `v-lazy:bgset` -->
  <div v-lazy:bgset="'url(bg.img) 1x, url(bg-2x.img) 2x'">background</div>
</template>

<script>
import logo from './assets/logo.png'

export default {
  data() {
    return {
      logo: logo
    }
  }
}