Vue component for showing loader while image loading
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.
Install
Install component via NPM
npm install vue-load-image --save |
HTML
here is sample template which shows loader while image loading.
<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> |
JS
call the component and enable functionality.
<script> // es6 import VueLoadImage from 'vue-load-image' // es5 var VueLoadImage = require('vue-load-image').default export default { components: { 'vue-load-image': VueLoadImage } } </script> |
See live demo and download source code.
DEMO | DOWNLOAD
This awesome plugin is developed by john015. Visit their official github repository for more information and follow for future updates.