Vue.js Progressive Image Loading Plugin

A Vue.js 3 plugin that has the ability to progressively load images with a blur effect just as you have seen on Medium.com.

How to use it:

1. Import and register the plugin.

//  locally
import "vue-progressive-image/dist/style.css";
import { ProgressiveImage } from "vue-progressive-image";
// globally
import "vue-progressive-image/dist/style.css"; 
import VueProgressiveImage from 'vue-progressive-image'
createApp(App).use(VueProgressiveImage).mount("#app");

2. Add the VueProgressiveImage to the template and specify the path to your image as follows:

<template>
  <ProgressiveImage src="1.jpg" />
</template>

3. Default props.

src: String,
placeholderSrc: String,
fallbackSrc: String,
alt: String,
title: String,
customClass: String,
blur: [Number, String],
lazyPlaceholder: {
  type: Boolean,
  default: false,
},
delay: {
  type: [Number, String],
  default: 0,
},
objectCover: {
  type: Boolean,
  default: false,
},

Live Preview:

Vue.js Progressive Image Loading Plugin

Changelog:

v4.0.0 (05/31/2022)

  • Vue 3 support

Download Details:

Author: MatteoGabriele

Live Demo: https://github.com/MatteoGabriele/vue-progressive-image

Download Link: https://github.com/MatteoGabriele/vue-progressive-image/archive/master.zip

Official Website: https://github.com/MatteoGabriele/vue-progressive-image

Install & Download:

$ npm install vue-progressive-image

Add Comment