# 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.


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

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

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

# Installation


// main.js
import Vue from 'vue';
import { VImg } from 'vuetensils/src/components';

Vue.component('VImg', VImg);


// SomeComponent.vue
import { VImg } from 'vuetensils/src/components';

export default {
  components: {
  // ...

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 customize the output HTML classes:

:classes="{ root: 'root-class', placeholder: 'placeholder-class', img: 'img-class' }"
Last Updated: 12/18/2020, 10:17:28 AM