Category: Image

Vue.js Progressive Image Loading Plugin

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: , lazyPlaceholder: { type: Boolean, default: false, }, delay: {

May 31, 2022 Image, Loading