https://github.com/kevindesousa/vue-image-loader

Vue progressive image loader plugin like Medium
https://github.com/kevindesousa/vue-image-loader

image loading medium progressive-image vue vue-components vue2 vuejs vuejs2

Last synced: 3 months ago
JSON representation

Vue progressive image loader plugin like Medium

• Host: GitHub
• URL: https://github.com/kevindesousa/vue-image-loader
• Owner: kevindesousa
• License: mit
• Created: 2018-08-11T12:54:53.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-26T10:03:57.000Z (over 6 years ago)
• Last Synced: 2024-04-25T23:04:36.221Z (9 months ago)
• Topics: image, loading, medium, progressive-image, vue, vue-components, vue2, vuejs, vuejs2
• Language: JavaScript
• Homepage: https://www.kevindesousa.me/vue-image-loader/
• Size: 7.17 MB
• Stars: 59
• Watchers: 2
• Forks: 8
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-image-loader

Vue progressive image loading plugin

![alt tag](https://raw.githubusercontent.com/kevindesousa/vue-image-loader/master/example.gif)

Article here : [https://www.kevindesousa.me/vue-image-loader/](https://www.kevindesousa.me/vue-image-loader/)

## Installation

```bash

$ npm install @kevindesousa/vue-image-loader

```

## Usage

```js

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

```html



```

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

```html

```

## 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

```html

```

# 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](https://twitter.com/kevin_desousa)