Complete implementation of Vue component that display loader during image loading
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.
Installation
Via NPM:
# for Vue 2.x npm i vue-load-image # for Vue 3.x npm i vue-load-image@next
Via CDN:
<!-- for Vue 2.x --> <script src='https://unpkg.com/vue-load-image'></script> <!-- for Vue 3.x --> <script src='https://unpkg.com/vue-load-image@next'></script>
Usage
Image
Vue 2.x
<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' export default { components: { 'vue-load-image': VueLoadImage } } </script>
Vue 3.x
<template> <div> <vue-load-image> <template v-slot:image> <img src="./image.png"/> </template> <template v-slot:preloader> <img src="./image-loader.gif" /> </template> <template v-slot:error>Image load fails</template> </vue-load-image> </div> </template> <script> import VueLoadImage from 'vue-load-image' export default { components: { 'vue-load-image': VueLoadImage } } </script>
Background-image
Vue 2.x
<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' export default {
components: {
'vue-load-image': VueLoadImage
}
}
</script>
Vue 3.x
<template>
<div>
<vue-load-image>
<template v-slot:image>
<div style="background-image: url(./image.png)" data-src='./image.png' />
</template>
<template v-slot:preloader>
<img src="./image-loader.gif" />
</template>
<template v-slot:error>Image load fails</template>
</vue-load-image>
</div>
</template> <script>
import VueLoadImage from 'vue-load-image' export default {
components: {
'vue-load-image': VueLoadImage
}
}
</script>