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 ❤️ by Jofferson Ramirez Tiquez