English | 한국어

Vue-load-image is 1KB(gzipped) minimalist Vue component that display loader during image loading, as well as by display alternate content when the image fails to load.

Demo

vue-load-image 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 > import VueLoadImage from ' vue-load-image ' var VueLoadImage = require ( ' vue-load-image ' ) . default export default { components : { ' vue-load-image ' : VueLoadImage } } < / script >

< 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 > import VueLoadImage from ' vue-load-image ' 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