lazyimage.vue

<template>
  <figure :class="[objectFit !== '' ? 'is-' + objectFit : '']">
    <picture v-if="imageFetchMode === 'srcset'">
      <source :data-srcset="image.webp" type="image/webp" />
      <source :data-srcset="image.opt" type="image/jpg" />
      <img
        :src="image.placeholder"
        class="lazyload blur"
        :data-src="image.opt"
      />
    </picture>
    <img
      v-else-if="imageFetchMode === 'img'"
      :src="image.placeholder"
      class="lazyload blur"
      :data-src="image.opt"
    />
    <img v-else class="lazyload" :data-src="dataSrc" />
  </figure>
</template>
<script>
export default {
  props: {
    dataSrc: {
      default: "cat2.jpg",
      required: false,
      type: String
    },
    objectFit: {
      default: "cover",
      required: false,
      type: String
    },
    fetchMode: {
      default: "none",
      required: false,
      type: String
    },
    lqip: {
      default: true,
      required: false,
      type: Boolean
    },
    effect: {
      default: "reveal",
      required: false,
      type: String
    }
  },
  computed: {
    image() {
      try {
        return {
          original: require(`~/assets/images/${this.dataSrc}?original`),
          opt: require(`~/assets/images/${this.dataSrc}`),
          placeholder: require(`~/assets/images/${this.dataSrc}?sqip`),
          placeholderBlur: require(`~/assets/images/${this.dataSrc}?sqip`),
          // colors: require(`~/assets/images/${this.dataSrc}?lqip-colors`),
          webp: require(`~/assets/images/${this.dataSrc}?webp`)
        };
      } catch (e) {
        console.error(e);
        return "err.jpg";
      }
    },
    imageFetchMode() {
      const regex = new RegExp("^(http|https)://", "i");
      if (regex.test(this.dataSrc)) {
        return "https";
      } else {
        return this.fetchMode !== "none" ? this.fetchMode : "srcset";
      }
    }
  }
};
</script>