vue-image-fallback

1.0.0 • Public • Published

vue-image-fallback

Vue directive for broken images

Usage

import Vue from 'vue';
import ImageFallback from 'vue-image-fallback';
 
Vue.use(ImageFallback);
 

Example with string

<img src="foo.png" v-image-fallback="url/to/fallback/image">
 

Example with array

<img src="foo.png" v-image-fallback="[fallback_image1, fallback_image2, etc]">
 

Example with object

<template>
  <img src="foo.png" v-image-fallback="imageFallbackOptions">
</template>
 
<script>
  export default {
    data() {
      return {
        imageFallbackOptions: {
          images: [
            "image_1",
            "image_2",
            "etc",
          ],
          
          loading: "url/to/loader/image",
          onError: this.onError()
        }
      }
    },
    
    methods: {
      onError() {
        // do something here when all images failed to load
      }
    }
  }
</script>
 

Readme

Keywords

none

Package Sidebar

Install

npm i vue-image-fallback

Weekly Downloads

22

Version

1.0.0

License

MIT

Unpacked Size

4.08 kB

Total Files

6

Last publish

Collaborators

  • velua