Progressive Image Loading in Vue.js

Install progressive-image in your Vue.js project with Yarn or NPM:

# Yarn
$ yarn add progressive-image
# NPM
$ npm install progressive-image --save

You’ll need to import the CSS in your page first. Use whatever method you’d like. (The most basic method being a direct import.)

<link href="./node_modules/progressive-image/dist/index.css" rel="stylesheet" type="text/css">

Now, in your app’s main file, enable the ProgressiveImage plugin.

import Vue from 'vue';
import ProgressiveImage from 'progressive-image/dist/vue'
import App from 'App.vue';

Vue.use(ProgressiveImage, {
  removePreview: true
});

new Vue({
  el: '#app',
  render: h => h(App)
});

From there, it’s a cinch to add a preview to your component. Assuming you have a full-size and low-resolution image already prepared,

<template>
  <div class="my-component">
    <!-- Render a progressive image -->
    <div class="progressive">
      <img class="preview" v-progressive="'./example.png'" src="./example-preview.png"/>
    </div>

  </div>
</template>

Bindings are fully supported, so it’s also a cinch to render images from an array or data set.

Bonus: srcset support.

As an added bonus, progressive-image supports srcset usage for responsive images. (If you’re not familiar with what that is, here’s a great article on the subject.)

You can use it directly through a data attribute or a binding.

<template>
  <div class="my-component">
    <!-- Render a progressive image -->
    <div class="progressive">
      <img class="preview" v-progressive="'./example.png'" src="./example-preview.png" data-srcset="./example.jpg 1x, ./example@2x.jpg 2x"/>
    </div>

  </div>
</template>

Have fun with super simple, great looking responsive images!