Vue progressive image loader plugin like Medium

Overview

vue-image-loader

Vue progressive image loading plugin

alt tag

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 | 回像动态įģ˜åˆļ效果
🙋‍♀ī¸ 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

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

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

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

 Imagvue is an image component for Vue.js
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

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

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

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

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

🌉 Vue Image Placeholder component
🌉 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

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

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

A easy way to use image in Vue template without write css.
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

Comments
  • The following warnings and errors occur with Vue 3.0.0:

    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
A Vue component for showing loader during image loading https://john015.github.io/vue-load-image/

English | 한ęĩ­ė–´ Vue-load-image Vue-load-image is 1KB(gzipped size) minimalist Vue component that display loader during image loading and display alterna

Sangwon Lee 60 Dec 7, 2022
🌈 A Vue image component. Simple realization of image shadow.

?? vue-image-shadow A Vue image component. Simple realization of image shadow. ?? Example Online: https://image-component.github.io/vue-image-shadow/

null 21 Aug 13, 2022
vue-image-markup will provide you to edit uploaded image easily and save it.

Markup Image with Vue.js (customizable) vue-image-markup will provide you to edit uploaded image easily and save it. Installation npm i vue-image-mark

Lionix 92 Dec 9, 2022
A Directive for setting fall back image in a vue js application if in case image is not loaded

vue-fall-back-image-directive A Directive for setting fall back image in a vue js application. Installation npm install Run npm install --save vue-fal

Arun sivan 1 Oct 15, 2019
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.

vue-svg-inline-loader Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects. Loader parses only HT

Oliver Findl 118 Jan 6, 2023
A Vue.js (https://github.com/vuejs/vue) plugin that offers a reusable directive to get image from Cloudinary (https://cloudinary.com)

vue-cloudinary A Vue.js plugin that offers a reusable directive to get image from cloudinary Overview This is a port of the angular-cloudinary library

Diego Pamio 25 Dec 5, 2020
Vue plugin with simple component for choosing image

vue-image-chooser This is vue plugin with simple component for choosing image. It supports easy implementation for image upload to the backend. Instal

Stefan Jeremic 5 May 7, 2021
Multiple select areas in one image (Plugin Vuejs)

Multi Select Areas Image Live Demos https://demo-multi-select-areas-image.herokuapp.com Installation With npm or yarn yarn add multi-select-areas-imag

Sun* Research 39 Nov 23, 2022
Collecting images and photos like a pro.

Scrapbook Collecting images and photos like a pro. Demo demo Why When you have a tons of photos you took while your traveling, or art images you downl

Fumiya A 5 Jan 31, 2022
Millicast viewer plugin for Vue framework. It uses Vuex store for the plugin state management.

Millicast Vue.js Web Viewer Plugin Vue.js plugin to embed viewer of a Millicast stream. This plugin allows developers to simplify Millicast services i

Millicast, Inc. 3 Oct 18, 2022