https://github.com/jofftiquez/v-img-fallback

Vue Image Fallback
https://github.com/jofftiquez/v-img-fallback

directives image javascript placeholder vue vue-directive vuejs

Last synced: about 2 months ago
JSON representation

Vue Image Fallback

• Host: GitHub
• URL: https://github.com/jofftiquez/v-img-fallback
• Owner: jofftiquez
• License: mit
• Created: 2017-11-13T07:20:33.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-03-11T14:48:12.000Z (over 4 years ago)
• Last Synced: 2024-07-17T13:19:34.672Z (2 months ago)
• Topics: directives, image, javascript, placeholder, vue, vue-directive, vuejs
• Language: JavaScript
• Homepage:
• Size: 57.6 KB
• Stars: 44
• Watchers: 3
• Forks: 10
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-pinoy-made - Github

README

        
# 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:

```js

// in your vue.config.js for vue-cli-3

module.exports = {

  /* ... other config ... */

  transpileDependencies: ['v-img-fallback']

}

```

### Install globally

```js

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

```vue

  

import { ImgFallback } from 'v-img-fallback';

export default {

  directives: {

    ImgFallback

  },

  data: () => {

    imgFallback: {

      loading: 'path/to/loading/image',

      error: 'path/to/error/image'

    }

  }

};

```

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

```js

{

  loading: 'path/to/loading/image',

  error: 'path/to/error/image'

}

```

### Sample - pass a string

```vue

  

```

### Sample - pass an object

```vue

  

  export default {

    data: () => {

      imgFallback: {

        loading: 'path/to/loading/image',

        error: 'path/to/error/image'

      }

    }

  }

```

**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 :heart: by Jofferson Ramirez Tiquez**