v-img-error

The source code for v-img-error a VueJS Directive.

A simple Vue directive to catch img errors & broken links and replace them with default or custom fallback image. NO dependencies!

If you like this project, please give it a star & consider following the author. :)

Installation

npm install v-img-error

Install globally

main.js

import Vue from 'vue';
import vImgError from 'v-img-error';

Vue.use(vImgError)

Install locally

component.vue

import { vImgError as imgError } from  "v-img-error";

export default {
   directives: {
      imgError
   }
}

Basic Usage

<template>
    <img src="myImg.png" v-img-error>
    <img src="anotherImg.svg" v-img-error>
</template>

Advanced Usage

With your custom fallback Img:

<template>
    <img src="myImg.png" v-img-error="path/to/image">
    <img src="anotherImg.svg" v-img-error="path/to/svg">
</template>

Authors

Maor Barel

License

---

MIT © Maor Barel