English | 한국어
Vue-load-image
Vue-load-image is 1KB(gzipped size) minimalist Vue component that display loader during image loading and display alternate content when the image fails to load.
Demo
Installation
Via NPM:
npm i vue-load-image
Via CDN:
<script src='https://unpkg.com/vue-load-image'></script>
Usage
Img
<template>
<div>
<vue-load-image>
<img slot="image" src="./image.png"/>
<img slot="preloader" src="./image-loader.gif"/>
<div slot="error">error message</div>
</vue-load-image>
</div>
</template>
<script>
// es6
import VueLoadImage from 'vue-load-image'
// es5
var VueLoadImage = require('vue-load-image').default
export default {
components: {
'vue-load-image': VueLoadImage
}
}
</script>
Background-image
<template>
<div>
<vue-load-image>
<div slot="image" style="background-image: url(./image.png)" data-src='./image.png' />
<img slot="preloader" src="./image-loader.gif" />
<div slot="error">error message</div>
</vue-load-image>
</div>
</template>
<script>
// es6
import VueLoadImage from 'vue-load-image'
// es5
var VueLoadImage = require('vue-load-image').default
export default {
components: {
'vue-load-image': VueLoadImage
}
}
</script>
⚠️
Notice
Set data-src to be the same as background-image url
Events
| Name | Description |
|---|---|
onError |
onError gets triggered when the image fails to load. |
onLoad |
onLoad gets triggered when the image is loaded. |
Slots
"image" slot will be rendered when the image is successfully loaded
"preloader" slot will be rendered when the image is in the process of loading
"error" slot will be rendered when the image load fails.
0 Feb 1, 2020
864 Dec 9, 2022
57 Jul 19, 2022
0 Jan 22, 2022
118 Jan 6, 2023
21 Aug 13, 2022
92 Dec 9, 2022
1 Oct 15, 2019
26 Sep 19, 2022
272 Jan 3, 2023
266 Dec 23, 2022
2.1k Dec 27, 2022
5 Aug 19, 2021
119 Dec 24, 2022
40 Dec 24, 2022
5 May 7, 2021
2 Oct 3, 2021
0 Oct 22, 2020
0 Dec 3, 2020