English | í•œêµì–´
Vue-load-image
Vue-load-image is 3KB minimalist Vue component that display loader during image loading, as well as by 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.
