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) **