# Img

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.

Features:

  • Built to behave as close to native <img> element as possible.
  • Provides lazy-loading with more options than native.
  • Supports placeholder colors or images.

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/src/components"

Vue.component("VImg", VImg)

Locally:

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

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

For IE 11 support, you may want to add the following polyfill:

<script src='https://cdn.polyfill.io/v2/polyfill.js?features=IntersectionObserver'></script>

# Default use

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

# Colored Placeholder

# Blurred Thumbnail Placeholder

# Custom Transition Duration

If you don't like the default transition duration (300ms), you can pass a custom duration in miliseconds.

# Misc

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

# 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: 4/18/2020, 3:57:00 PM