jofftiquez / v-img-fallback

Vue Image Fallback

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

v-img-fallback's Issues

ReferenceError: loading is not defined

With latest version, loading and error are not defined in lines 4 and 5.

Whats de.4-traders.com/images/loading_100.gif?

v-img-fallback/src/index.js

Line 9 in 5831ce0

const defaultLoading = loading || 'http://de.4-traders.com/images/loading_100.gif';

Options for setting global loading/error image

Hey buddy! @jofftiquez

Could you add some options to set loading or error image for every binding image.

Such as:

 Vue.use('VImgFallback', {
    loading: 'path/to/loading.png',
    error: 'path/to/error.png'
}

vulnerability reported

https://app.snyk.io/test/npm/v-img-fallback/0.1.4

ESM module not compatible with IE11

Switching to ESM module is great but it breaks backward compatibility.

It would be great to have a note in README to know how to configure webpack/vue-cli to have backward compatibility

loading override not working

Hello. Create plugin. I noticed an issue when I add a loading override image.

This is my setting.

Vue.use(VImgFallback, {
loading: '/static/img/loading.gif',
error: '/static/img/no_picture.svg'
})

The error image override does work perfectly.

In the plugin code I get the message that loading is not declared.

Regards,

Dennis