Category: Image

Vue.js components, plugins, and other related libraries for handling and manipulating images on your web applications.

Create Responsive Image Tags For All Devices

Vue Responsive Image is a Vue component that allows you to quickly insert responsive image tags in your Vue project, provided you have some automated system that produces the various sizes of images required.

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: {