https://github.com/john015/vue-load-image

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

image image-loader image-preloader loader vue vue-components vue-image vue-image-loader vue-load-image vue3 vue3-image-loader vuejs

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/john015/vue-load-image
• Owner: john015
• License: mit
• Created: 2018-11-21T07:23:35.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:01:26.000Z (almost 3 years ago)
• Last Synced: 2024-04-25T21:22:54.458Z (over 1 year ago)
• Topics: image, image-loader, image-preloader, loader, vue, vue-components, vue-image, vue-image-loader, vue-load-image, vue3, vue3-image-loader, vuejs
• Language: Vue
• Homepage:
• Size: 1.86 MB
• Stars: 66
• Watchers: 2
• Forks: 8
• Open Issues: 13
• Metadata Files:
  • Readme: README-ko.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vue-load-image - A Vue component for showing loader during image loading https://john015.github.io/vue-load-image/ ` 📝 7 months ago` (UI Components [🔝](#readme))
• awesome-vue - vue-load-image ★17 - display loader during image loading, as well as by display alternate content when the image fails to load. (UI Components / Form)
• awesome-vue - vue-load-image - display loader during image loading, as well as by display alternate content when the image fails to load. (Components & Libraries / UI Components)
• awesome-vue - vue-load-image - display loader during image loading, as well as by display alternate content when the image fails to load. (UI Components / Form)

README

          
[English](./README.md) | 한국어

# vue-load-image

[![npm](https://img.shields.io/npm/dt/vue-load-image.svg)](https://www.npmjs.com/package/vue-load-image) ![npm bundle size (minified)](https://img.shields.io/bundlephobia/minzip/vue-load-image.svg) [![npm version](https://img.shields.io/npm/v/vue-load-image.svg?style=flat)](https://www.npmjs.com/package/vue-load-image) [![NpmLicense](https://img.shields.io/npm/l/vue-load-image.svg)](https://github.com/john015/vue-load-image/blob/master/LICENSE)

vue-load-image 는 이미지로드 중 이미지 로더를 표시하며 이미지로드에 실패 했을때 대체 내용을 표시하는 1KB(gzipped size) Vue component 입니다.

## Demo

[vue-load-image Demo](https://john015.github.io/vue-load-image/) / [(Source Code)](https://github.com/john015/vue-load-image/tree/master/example) 

## Installation

### Via NPM:

```bash

# for Vue 2.x

npm i vue-load-image 

# for Vue 3.x

npm i vue-load-image@next

```

### Via CDN:

```html

```

## Usage

### Image

#### Vue 2.x

```js

  


    

      

      

      
error message

    

  


import VueLoadImage from 'vue-load-image'

export default {

  components: {

    'vue-load-image': VueLoadImage

  }

}

```

#### Vue 3.x

```js

  


    

      

        

      

       

        

      

      Image load fails

    

  


import VueLoadImage from 'vue-load-image'

export default {

  components: {

    'vue-load-image': VueLoadImage

  }

}

```

### Background-image

#### Vue 2.x

```js

  


    

      


      

      
error message

    

  


import VueLoadImage from 'vue-load-image'

export default {

  components: {

    'vue-load-image': VueLoadImage

  }

}

```

#### Vue 3.x

```js

  


    

      

        


      

       

        

      

      Image load fails

    

  


import VueLoadImage from 'vue-load-image'

export default {

  components: {

    'vue-load-image': VueLoadImage

  }

}

```

#### ⚠️유의사항

data-src 값을 background-image url 과 동일하게 설정 해주세요.

## Events

| Name      | Description                                |

| --------- | ------------------------------------------ |

| `onError` | 이미지 로드 실패시 onError 가 호출 됩니다. |

| `onLoad`  | 이미지가 로드되면 onLoad 가 호출 됩니다.   |

## Slots

이미지가 성공적으로 로드 되면 "image" slot 이 렌더링 됩니다.

이미지가 로드 중일 때 "preloader" slot 이 렌더링됩니다.

이미지로드에 실패하면 "error" slot 이 렌더링됩니다.