vli

vue-load-image

A Vue component for showing loader during image loading https://john015.github.io/vue-load-image/

Showing:

Popularity

Downloads/wk

922

GitHub Stars

55

Maintenance

Last Commit

3mos ago

Contributors

2

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

English | 한국어

Vue-load-image

npm npm bundle size (minified) npm version NpmLicense

Vue-load-image is 1KB(gzipped size) minimalist Vue component that display loader during image loading and display alternate content when the image fails to load.

Demo

vue-load-image Demo / (Source Code)

Installation

Via NPM:

# for Vue 2.x
npm i vue-load-image 

# for Vue 3.x
npm i vue-load-image@next

Via CDN:

<!-- for Vue 2.x -->
<script src='https://unpkg.com/vue-load-image'></script>

<!-- for Vue 3.x -->
<script src='https://unpkg.com/vue-load-image@next'></script>

Usage

Image

Vue 2.x

<template>
  <div>
    <vue-load-image>
      <img slot="image" src="./image.png"/>
      <img slot="preloader" src="./image-loader.gif"/>
      <div slot="error">error message</div>
    </vue-load-image>
  </div>
</template>

<script>
import VueLoadImage from 'vue-load-image'

export default {
  components: {
    'vue-load-image': VueLoadImage
  }
}
</script>

Vue 3.x

<template>
  <div>
    <vue-load-image>
      <template v-slot:image>
        <img src="./image.png"/>
      </template>
      <template v-slot:preloader> 
        <img src="./image-loader.gif" />
      </template>
      <template v-slot:error>Image load fails</template>
    </vue-load-image>
  </div>
</template>

<script>
import VueLoadImage from 'vue-load-image'

export default {
  components: {
    'vue-load-image': VueLoadImage
  }
}
</script>

Background-image

Vue 2.x

<template>
  <div>
    <vue-load-image>
      <div slot="image" style="background-image: url(./image.png)" data-src='./image.png' />
      <img slot="preloader" src="./image-loader.gif" />
      <div slot="error">error message</div>
    </vue-load-image>
  </div>
</template>

<script>
import VueLoadImage from 'vue-load-image'

export default {
  components: {
    'vue-load-image': VueLoadImage
  }
}
</script>

Vue 3.x

<template>
  <div>
    <vue-load-image>
      <template v-slot:image>
        <div style="background-image: url(./image.png)" data-src='./image.png' />
      </template>
      <template v-slot:preloader> 
        <img src="./image-loader.gif" />
      </template>
      <template v-slot:error>Image load fails</template>
    </vue-load-image>
  </div>
</template>

<script>
import VueLoadImage from 'vue-load-image'

export default {
  components: {
    'vue-load-image': VueLoadImage
  }
}
</script>

⚠️Notice

Set data-src to be the same as background-image url

Events

NameDescription
onErroronError gets triggered when the image fails to load.
onLoadonLoad gets triggered when the image is loaded.

Slots

"image" slot will be rendered when the image is successfully loaded

"preloader" slot will be rendered when the image is in the process of loading

"error" slot will be rendered when the image load fails.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100