Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JackGit/vue-img-loader
this is a image loader UI component for Vue 2.X
https://github.com/JackGit/vue-img-loader
Last synced: 2 months ago
JSON representation
this is a image loader UI component for Vue 2.X
- Host: GitHub
- URL: https://github.com/JackGit/vue-img-loader
- Owner: JackGit
- Created: 2016-10-20T14:43:07.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-10T14:13:49.000Z (over 6 years ago)
- Last Synced: 2024-10-28T19:03:43.626Z (2 months ago)
- Language: Vue
- Homepage: http://jackgit.github.io/vue-img-loader/index.html
- Size: 15.9 MB
- Stars: 43
- Watchers: 4
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-img-loader - img-loader?style=social) - 图片加载UI组件 (UI组件)
- awesome-github-vue - vue-img-loader - 图片加载UI组件 (UI组件)
- awesome-github-vue - vue-img-loader - 图片加载UI组件 (UI组件)
- awesome - vue-img-loader - 图片加载UI组件 (UI组件)
README
## description
this is a image loader UI component for Vue 2.X. The image will be center positioned after loaded
## demo
[live demo][1]
## requirement
Vue 2.0
## install
by npm
```bash
npm i vue-img-loader --save
```
or, directly include dist/vue-img-loader.min.js in your page, VueImgLoader exposed as global variable
```html
<script>
```
then, use it as any Vue component
```js
// es6
import VueImgLoader from 'vue-img-loader';
// es5
var VueImgLoader = require('vue-img-loader');
new Vue({
...
components: {
'vue-img-loader': VueImgLoader
}
...
})
```
## usage
```html
// 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
```js
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
[1]: http://jackgit.github.io/vue-img-loader/index.html