JSPM – vue-img-loader@1.0.0

Package Exports

vue-img-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-img-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

description

this is a image loader UI component for Vue 2.X. The image will be center positioned after loaded

demo

live demo

requirement

install

by npm

npm i vue-img-loader --save

or, directly include dist/vue-img-loader.min.js in your page, VueImgLoader exposed as global variable

<script src="path/to/vue-img-loader.min.js"><script>

then, use it as any Vue component

// es6
import VueImgLoader from 'vue-img-loader';

// es5
var VueImgLoader = require('vue-img-loader');

new Vue({
    ...
    components: {
        'vue-img-loader': VueImgLoader
    }
    ...
})

usage

// you will see a 200*100 lightgrey box before the image loaded, and the loaded image will be displayed in the same size
<vue-img-loader src="path/to/your/image.jpg"
                width="200"
                height="100"
                center-type="contain"
                background-color="lightgrey"></vue-img-loader>

// you can also give a preview
<vue-img-loader src="path/to/your/image.jpg"
                preview="path/to/your/preview.jpg"
                :blur-preview="false"
                width="200"
                height="100"></vue-img-loader>

// and you can blur your preview like what medium.com does
<vue-img-loader src="path/to/your/image.jpg"
                preview="path/to/your/preview.jpg"
                width="200"
                height="100"></vue-img-loader>

// and you can customize more about loading status
<vue-img-loader src="path/to/your/image.jpg" width="200" height="100">
  <h4>loading...</h4>
</vue-img-loader>

// at last, transition is supported, just assign the name of a defined vue transition
<vue-img-loader src="path/to/your/image.jpg"
                preview="path/to/your/preview.jpg"
                width="200"
                height="100"
                transition="fade"></vue-img-loader>

config

you can change VueImgLoader's default props value by change the config object. Blow are the default config

VueImgLoader.config.blurPreview = true;
VueImgLoader.config.blurRadius = 20;
VueImgLoader.config.blurAlphaChannel = false;
VueImgLoader.config.width = 0;
VueImgLoader.config.height = 0;
VueImgLoader.config.backgroundColor = '';
VueImgLoader.config.transition = '';
VueImgLoader.config.centerType = 'cover'; // "cover", "contain"

todo

will support lazy load next