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. :)
npm install v-img-fallback --save
yarn add v-img-fallback
import { createApp } from 'vue';
import VueImgFallback from 'v-img-fallback';
const app = createApp({})
app.use(VueImgFallback, {
loading: 'path/to/loading/image',
error: 'path/to/error/image'
});
<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>
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'
}
<template>
<img src="foo.png" v-img-fallback="path/to/placeholder">
</template>
<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>
Tips
loading
value can be a .gif
Gee. Ahy. Ef. (I will die with dignity LOL).
**Made with โค๏ธ by Jofferson Ramirez Tiquez & ported to Vue 3 by Lucas Pinho (its not a big thing, k) **