# VImg

Drop in replacement for the HTML <img> tag which supports lazy-loading. Improves load times by waiting for the image to scroll into view before actually downloading it.

Note: This component uses IntersectionObserver which is not supported by Internet Explorer.

Source

Note that this site has the following global CSS which is applied to examples:

img {
  max-width: 100%;
  height: auto;
}

# Installation

Globally:

// main.js
import Vue from "vue"
import { VImg } from "vuetensils"

Vue.component("VImg", VImg)

Locally:

<script>
// SomeComponent.vue
import { VImg } from "vuetensils"

export default {
  components: {
    VImg,
  },
  // ...
}
</script>

# Default use

<template>
  <VImg src="https://source.unsplash.com/random/900x600" />
</template>

Pass in the image dimensions to avoid the page jumping when the image loads

<template>
  <VImg
    src="https://source.unsplash.com/random/900x550"
    width="900"
    height="550"
  />
</template>

# Colored Placeholder

<template>
  <VImg
    src="https://source.unsplash.com/random/1000x550"
    width="1000"
    height="550"
    background="#ddd"
  />
</template>

# Blurred Thumbnail Placeholder

<template>
  <VImg
    :src="`https://images.unsplash.com/photo-1546094324-7fd2718befe3?w=1080`"
    width="1080"
    height="864"
    placeholder="https://images.unsplash.com/photo-1546094324-7fd2718befe3?w=30"
  />
</template>

# Misc

Don't forget all the other best practices such as srcset attribute and alt text

<template>
  <VImg
    :src="`https://images.unsplash.com/photo-1455656678494-4d1b5f3e7ad4?w=1080`"
    width="900"
    height="600"
    placeholder="https://images.unsplash.com/photo-1455656678494-4d1b5f3e7ad4?w=30"
    srcset="https://images.unsplash.com/photo-1455656678494-4d1b5f3e7ad4?w=320 320w,
      https://images.unsplash.com/photo-1455656678494-4d1b5f3e7ad4?w=480 480w,
      https://images.unsplash.com/photo-1455656678494-4d1b5f3e7ad4?w=800 800w"
    sizes="(max-width: 320px) 280px,
      (max-width: 480px) 440px,
      (max-width: 800px) 760px,
      1080px"
    alt="Beautiful forest"
  />
</template>

# Custom Classes

This component can accept a classes prop to cusomize the output HTML classes:

:classes="{ root: 'root-class', placeholder: 'placeholder-class', img: 'img-class' }"
Last Updated: 11/19/2019, 5:58:27 AM