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

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.

September 13, 2022 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