description
this is a image loader UI component for Vue 2.X. The image will be center positioned after loaded
demo
requirement
Vue 2.0
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
then, use it as any Vue component
// es6; // es5var VueImgLoader = ; ... 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 // you can also give a preview // and you can blur your preview like what medium.com does // and you can customize more about loading status loading... // at last, transition is supported, just assign the name of a defined vue transition
config
you can change VueImgLoader's default props value by change the config object. Blow are the default config
VueImgLoaderconfigblurPreview = true;VueImgLoaderconfigblurRadius = 20;VueImgLoaderconfigblurAlphaChannel = false;VueImgLoaderconfigwidth = 0;VueImgLoaderconfigheight = 0;VueImgLoaderconfigbackgroundColor = '';VueImgLoaderconfigtransition = '';VueImgLoaderconfigcenterType = 'cover'; // "cover", "contain"
todo
will support lazy load next