Vue Image Fallback
v-img-fallback
Vue image placeholder directive for broken images.
If you like this project, please give it a star, and consider following the author. :)
Usage
Install with NPM or Yarn
npm install v-img-fallback --save
yarn add v-img-fallback
Transpile for target: es5
This module is distributed as an esm module.
If you need backwards compatibility, you will need to transpile this module:
// in your vue.config.js for vue-cli-3
module.exports = {
/* ... other config ... */
transpileDependencies: ['v-img-fallback']
}
Install globally
import Vue from 'vue';
import VueImgFallback from 'v-img-fallback';
Vue.use(VueImgFallback, {
loading: 'path/to/loading/image',
error: 'path/to/error/image'
});
Install locally
<template>
<img src="foo.png" v-img-fallback="imgFallback">
template>
<script>
import { ImgFallback } from 'v-img-fallback';
export default {
directives: {
ImgFallback
},
data: () => {
imgFallback: {
loading: 'path/to/loading/image',
error: 'path/to/error/image'
}
}
};
script>
API
This directive can receive string or object value.
string
Path or image url. This value will be used in both loading and error state.
object
{
loading: 'path/to/loading/image',
error: 'path/to/error/image'
}
Sample - pass a string
<template>
<img src="foo.png" v-img-fallback="path/to/placeholder">
template>
Sample - pass an object
<template>
<img src="foo.png" v-img-fallback="imgFallback">
template>
<script>
export default {
data: () => {
imgFallback: {
loading: 'path/to/loading/image',
error: 'path/to/error/image'
}
}
}
script>
Update
January 25, 2018 - Added options object to Vue.use(VueImgFallback, options). Options should have loading and error properties. These values will always be overwritten by the value inside v-img-fallback directive.
Tips
loading value can be a .gif Gee. Ahy. Ef. (I will die with dignity LOL).
Made with
18 Jun 21, 2022
0 Dec 2, 2019
118 Jan 6, 2023
808 Jan 5, 2023
5 Jan 31, 2022
78 Oct 25, 2022
1 Jul 6, 2020
57 Jul 19, 2022
26 Sep 19, 2022
1 Oct 15, 2019
267 Dec 18, 2022
4 Aug 25, 2022
5 Mar 29, 2022
25 Dec 5, 2020
60 Dec 7, 2022
0 Feb 1, 2020
21 Aug 13, 2022
92 Dec 9, 2022
28 Oct 16, 2022