Vue progressive image loader plugin like Medium

Last update: Jul 19, 2022

Overview

vue-image-loader

Vue progressive image loading plugin

Article here : https://www.kevindesousa.me/vue-image-loader/

Installation

$ npm install @kevindesousa/vue-image-loader

Usage

import Vue from 'vue'
import VueImageLoader from '@kevindesousa/vue-image-loader'

Vue.use(VueImageLoader)

Progressive loader image

Instead of using the normal img tag to load images

<img src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304" />

use the image-loader component already globally available after the plugin installation

<image-loader
  src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304"
  width="864px"
  height="476px" />

Placeholders

To be able to immediately show some feedback to the user, it is possible to pass a placeholder image, which could be also 1% the size of the main image: it will be blurred so you can go crazy with optimizations here.

in this example I actually use the same image, but you have the idea here

<image-loader
  src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304"
  placeholder="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?w=100"
  width="864px"
  height="476px"
/>

Issues and features requests

Please drop an issue, if you find something that doesn't work, or a feature request at https://github.com/kevindesousa/vue-image-loader/issues

Follow me on twitter @kevin_desousa

You might also like...

🙋‍♀️ Image magic animation drawing effect component for Vue 2.x | 图像动态绘制效果

vue-image-painter English | 简体中文 🌰 Example Demo Demo Source Code 🚀 QuickStart Install yarn add vue-image-painter # OR npm i -S vue-image-painter Imp

26 Sep 19, 2022

A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch .

272 Jan 3, 2023

Vue image placeholder directive for broken images.

Vue Image Fallback v-img-fallback Vue image placeholder directive for broken images. If you like this project, please give it a star, and consider fol

46 Oct 13, 2022

Imagvue is an image component for Vue.js

Imagvue Imagvue provides basic image processing props(size,blur,contrast,grayscale, etc.). Support image lazy loading. All Attributes can bind with da

266 Dec 23, 2022

Image comparison slider. Compare images before and after. Supports React, Vue, Angular.

267 Dec 18, 2022

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

2.1k Dec 27, 2022

🌉 Vue Image Placeholder component

Vue Image Placeholder 🌉 Multiservice Image Placeholder Vue component Installation yarn add vue-image-placeholder Use it in your app import ImagePlace

5 Aug 19, 2021

A Vue.js component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.

864 Dec 9, 2022

A easy way to use image in Vue template without write css.

vue-aimg-loader A easy way to use image in Vue template without write css. Installation npm i -D vue-aimg-loader yarn add --dev vue-aimg-loader Basic

8 May 29, 2022

Comments

The following warnings and errors occur with Vue 3.0.0:

Property "$createElement" was accessed during render but is not defined on instance. Property "_self" was accessed during render but is not defined on instance. Unhandled error during execution of render function. Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next. Uncaught (in promise) TypeError: Cannot read property '_c' of undefined.

Adding support for the very recently released Vue 3.0.0 would be amazing!

opened by MohammedElkashef 0