├── babel.config.js
├── example
    ├── image-loader.gif
    ├── vue2.vue
    └── vue3.vue
├── vue.config.js
├── .npmignore
├── src
    ├── index.ts
    └── components
    │   └── VueLoadImage.vue
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── package.json
├── README-ko.md
└── README.md


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ['@vue/cli-plugin-babel/preset'],
3 | }
4 | 


--------------------------------------------------------------------------------
/example/image-loader.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john015/vue-load-image/HEAD/example/image-loader.gif


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   productionSourceMap: false,
3 |   css: { extract: false },
4 | };
5 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .git*
3 | .idea
4 | Makefile
5 | docs/
6 | example/
7 | config/
8 | .eslintrc.js
9 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import VueLoadImage from './components/VueLoadImage.vue'
2 | 
3 | export default VueLoadImage
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: ['plugin:vue/vue3-essential', 'eslint:recommended'],
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint',
 9 |   },
10 | };
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Dependency directories #
 2 | ##########################
 3 | node_modules/
 4 | .yarn-integrity
 5 | .npm
 6 | 
 7 | # Logs and databases #
 8 | ######################
 9 | *.log
10 | 
11 | # OS generated files #
12 | .DS_Store
13 | ######################
14 | .DS_Store?
15 | ._*
16 | .Spotlight-V100
17 | .Trashes
18 | ehthumbs.db
19 | Thumbs.db 
20 | 
21 | dist/


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018-2019 John015
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-load-image",
 3 |   "version": "1.1.0",
 4 |   "description": "A vue component for showing loader during image loading",
 5 |   "scripts": {
 6 |     "build": "vue-cli-service build --target=lib src/index.ts"
 7 |   },
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "git://github.com/john015/vue-load-image.git"
11 |   },
12 |   "bugs": {
13 |     "url": "https://github.com/john015/vue-load-image/issues"
14 |   },
15 |   "keywords": [
16 |     "vue-component",
17 |     "vue",
18 |     "vue-image-loader",
19 |     "image-loader",
20 |     "loader",
21 |     "image",
22 |     "image-preloader"
23 |   ],
24 |   "main": "./dist/vue-load-image.common.js",
25 |   "browser": "./dist/vue-load-image.umd.min.js",
26 |   "author": "Sangwon Lee <lsw0150305@gmail.com>",
27 |   "license": "MIT",
28 |   "peerDependencies": {
29 |     "vue": "^3"
30 |   },
31 |   "devDependencies": {
32 |     "@vue/cli-plugin-babel": "^4.5.13",
33 |     "@vue/cli-plugin-eslint": "^4.5.13",
34 |     "@vue/cli-service": "^4.5.13",
35 |     "@vue/compiler-sfc": "^3.1.2",
36 |     "babel-eslint": "^10.1.0",
37 |     "eslint": "^6.7.2",
38 |     "eslint-plugin-vue": "^7.12.1",
39 |     "vue": "^3"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/example/vue2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h1>vue-load-image</h1>
 4 |     <button @click="changeImageURL">change image</button>
 5 |     <vue-load-image>
 6 |       <img slot="image" :src="src" />
 7 |       <img src="./image-loader.gif" slot="preloader" />
 8 |       <div slot="error">image load fails</div>
 9 |     </vue-load-image>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import VueLoadImage from "vue-load-image";
15 | export default {
16 |   name: "App",
17 |   data() {
18 |     return {
19 |       src: "https://picsum.photos/500/600/?random"
20 |     };
21 |   },
22 |   methods: {
23 |     changeImageURL() {
24 |       const randomImageNumber = Math.floor(Math.random() * 999) + 1;
25 |       this.src = "https://picsum.photos/500/600/?image=" + randomImageNumber;
26 |     }
27 |   },
28 |   components: {
29 |     "vue-load-image": VueLoadImage
30 |   }
31 | };
32 | </script>
33 | 
34 | <style>
35 | #app {
36 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
37 |   -webkit-font-smoothing: antialiased;
38 |   -moz-osx-font-smoothing: grayscale;
39 |   color: #2c3e50;
40 |   margin: 60px 0px 0px 60px;
41 | }
42 | button {
43 |   height: 35px;
44 |   font-size: 16px;
45 |   border-radius: 6px;
46 |   margin-bottom: 12px;
47 |   -webkit-appearance: none;
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/example/vue3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h1>vue-load-image</h1>
 4 |     <button @click="changeImageURL">change image</button>
 5 |     <vue-load-image>
 6 |       <template v-slot:image>
 7 |         <img :src="src" />
 8 |       </template>
 9 |       <template v-slot:preloader> 
10 |         <img src="./image-loader.gif" />
11 |       </template>
12 |       <template v-slot:error> image load fails </template>
13 |     </vue-load-image>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import VueLoadImage from "vue-load-image";
19 | export default {
20 |   name: "App",
21 |   data() {
22 |     return {
23 |       src: "https://picsum.photos/500/600/?random"
24 |     };
25 |   },
26 |   methods: {
27 |     changeImageURL() {
28 |       const randomImageNumber = Math.floor(Math.random() * 999) + 1;
29 |       this.src = "https://picsum.photos/500/600/?image=" + randomImageNumber;
30 |     }
31 |   },
32 |   components: {
33 |     "vue-load-image": VueLoadImage
34 |   }
35 | };
36 | </script>
37 | 
38 | <style>
39 | #app {
40 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
41 |   -webkit-font-smoothing: antialiased;
42 |   -moz-osx-font-smoothing: grayscale;
43 |   color: #2c3e50;
44 |   margin: 60px 0px 0px 60px;
45 | }
46 | button {
47 |   height: 35px;
48 |   font-size: 16px;
49 |   border-radius: 6px;
50 |   margin-bottom: 12px;
51 |   -webkit-appearance: none;
52 | }
53 | </style>
54 | 


--------------------------------------------------------------------------------
/src/components/VueLoadImage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vue-load-image">
  3 |     <slot v-if="status === 'loaded'" name="image" />
  4 |     <slot v-else-if="status === 'failed'" name="error" />
  5 |     <slot v-else-if="status === 'loading'" name="preloader" />
  6 |   </div>
  7 | </template>
  8 | 
  9 | <script>
 10 | const Status = {
 11 |   PENDING: 'pending',
 12 |   LOADING: 'loading',
 13 |   LOADED: 'loaded',
 14 |   FAILED: 'failed',
 15 | }
 16 | 
 17 | export default {
 18 |   data() {
 19 |     return {
 20 |       status: null,
 21 |       img: null,
 22 |       src: null,
 23 |     }
 24 |   },
 25 |   created() {
 26 |     const imageElement = this.getImgElementFromImageSlot()
 27 |     if (imageElement == null) {
 28 |       return
 29 |     }
 30 |     this.src = imageElement.props.src || imageElement.props['data-src']
 31 |     if (this.src) {
 32 |       this.status = Status.LOADING
 33 |       this.crossOrigin = imageElement.props.crossorigin
 34 |       this.createLoader()
 35 |     } else {
 36 |       this.status = Status.PENDING
 37 |     }
 38 |   },
 39 |   updated() {
 40 |     const imageElement = this.getImgElementFromImageSlot()
 41 |     if (imageElement == null) {
 42 |       return
 43 |     }
 44 |     const receivedSrc = imageElement.props.src || imageElement.props['data-src']
 45 |     if (this.status === Status.LOADING && !this.img) {
 46 |       this.createLoader()
 47 |       return
 48 |     }
 49 |     if (this.src !== receivedSrc) {
 50 |       this.src = receivedSrc
 51 |       this.crossOrigin = imageElement.props.crossorigin
 52 |       this.createLoader()
 53 |     }
 54 |   },
 55 |   watch: {
 56 |     src(value) {
 57 |       this.status = value ? Status.LOADING : Status.PENDING
 58 |     },
 59 |   },
 60 |   methods: {
 61 |     createLoader() {
 62 |       this.destroyLoader()
 63 |       this.img = new Image()
 64 |       this.img.onload = this.handleLoad
 65 |       this.img.onerror = this.handleError
 66 |       this.img.crossOrigin = this.crossOrigin
 67 |       this.img.src = this.src
 68 |     },
 69 |     destroyLoader() {
 70 |       if (this.img) {
 71 |         this.img.onload = null
 72 |         this.img.onerror = null
 73 |         this.img = null
 74 |       }
 75 |     },
 76 |     handleLoad() {
 77 |       this.destroyLoader()
 78 |       this.status = Status.LOADED
 79 |       this.$emit('onLoad')
 80 |     },
 81 |     handleError(error) {
 82 |       this.destroyLoader()
 83 |       this.status = Status.FAILED
 84 |       this.$emit('onError', error)
 85 |     },
 86 |     getImgElementFromImageSlot() {
 87 |       const imageSlot = this.$slots.image && this.$slots.image()
 88 |       if (imageSlot === undefined) {
 89 |         console.warn('Please define <template v-slot:image> slot in <vue-load-image>')
 90 |         return
 91 |       }
 92 |       return this.findImgElementFrom(imageSlot)
 93 |     },
 94 |     findImgElementFrom(slot) {
 95 |       const queue = [...slot]
 96 |       while (queue.length > 0) {
 97 |         const child = queue.shift()
 98 |         if (
 99 |           child.type === 'img' ||
100 |           (child.props && child.props['data-src'] != null)
101 |         ) {
102 |           return child
103 |         }
104 |         if (child.children instanceof Array) {
105 |           queue.push(...child.children)
106 |         }
107 |       }
108 |       return null
109 |     },
110 |   },
111 | }
112 | </script>
113 | 


--------------------------------------------------------------------------------
/README-ko.md:
--------------------------------------------------------------------------------
  1 | [English](./README.md) | 한국어
  2 | 
  3 | # vue-load-image
  4 | 
  5 | [![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)
  6 | 
  7 | vue-load-image 는 이미지로드 중 이미지 로더를 표시하며 이미지로드에 실패 했을때 대체 내용을 표시하는 1KB(gzipped size) Vue component 입니다.
  8 | 
  9 | ## Demo
 10 | 
 11 | [vue-load-image Demo](https://john015.github.io/vue-load-image/) / [(Source Code)](https://github.com/john015/vue-load-image/tree/master/example) 
 12 | 
 13 | ## Installation
 14 | 
 15 | ### Via NPM:
 16 | 
 17 | ```bash
 18 | # for Vue 2.x
 19 | npm i vue-load-image 
 20 | 
 21 | # for Vue 3.x
 22 | npm i vue-load-image@next
 23 | ```
 24 | 
 25 | ### Via CDN:
 26 | 
 27 | ```html
 28 | <!-- for Vue 2.x -->
 29 | <script src='https://unpkg.com/vue-load-image'></script>
 30 | 
 31 | <!-- for Vue 3.x -->
 32 | <script src='https://unpkg.com/vue-load-image@next'></script>
 33 | ```
 34 | 
 35 | ## Usage
 36 | 
 37 | ### Image
 38 | 
 39 | #### Vue 2.x
 40 | 
 41 | ```js
 42 | <template>
 43 |   <div>
 44 |     <vue-load-image>
 45 |       <img slot="image" src="./image.png"/>
 46 |       <img slot="preloader" src="./image-loader.gif"/>
 47 |       <div slot="error">error message</div>
 48 |     </vue-load-image>
 49 |   </div>
 50 | </template>
 51 | 
 52 | <script>
 53 | import VueLoadImage from 'vue-load-image'
 54 | 
 55 | export default {
 56 |   components: {
 57 |     'vue-load-image': VueLoadImage
 58 |   }
 59 | }
 60 | </script>
 61 | ```
 62 | 
 63 | #### Vue 3.x
 64 | 
 65 | ```js
 66 | <template>
 67 |   <div>
 68 |     <vue-load-image>
 69 |       <template v-slot:image>
 70 |         <img src="./image.png"/>
 71 |       </template>
 72 |       <template v-slot:preloader> 
 73 |         <img src="./image-loader.gif" />
 74 |       </template>
 75 |       <template v-slot:error>Image load fails</template>
 76 |     </vue-load-image>
 77 |   </div>
 78 | </template>
 79 | 
 80 | <script>
 81 | import VueLoadImage from 'vue-load-image'
 82 | 
 83 | export default {
 84 |   components: {
 85 |     'vue-load-image': VueLoadImage
 86 |   }
 87 | }
 88 | </script>
 89 | ```
 90 | 
 91 | ### Background-image
 92 | 
 93 | #### Vue 2.x
 94 | 
 95 | ```js
 96 | <template>
 97 |   <div>
 98 |     <vue-load-image>
 99 |       <div slot="image" style="background-image: url(./image.png)" data-src='./image.png' />
100 |       <img slot="preloader" src="./image-loader.gif" />
101 |       <div slot="error">error message</div>
102 |     </vue-load-image>
103 |   </div>
104 | </template>
105 | 
106 | <script>
107 | import VueLoadImage from 'vue-load-image'
108 | 
109 | export default {
110 |   components: {
111 |     'vue-load-image': VueLoadImage
112 |   }
113 | }
114 | </script>
115 | ```
116 | 
117 | #### Vue 3.x
118 | 
119 | ```js
120 | <template>
121 |   <div>
122 |     <vue-load-image>
123 |       <template v-slot:image>
124 |         <div style="background-image: url(./image.png)" data-src='./image.png' />
125 |       </template>
126 |       <template v-slot:preloader> 
127 |         <img src="./image-loader.gif" />
128 |       </template>
129 |       <template v-slot:error>Image load fails</template>
130 |     </vue-load-image>
131 |   </div>
132 | </template>
133 | 
134 | <script>
135 | import VueLoadImage from 'vue-load-image'
136 | 
137 | export default {
138 |   components: {
139 |     'vue-load-image': VueLoadImage
140 |   }
141 | }
142 | </script>
143 | ```
144 | 
145 | #### ⚠️유의사항
146 | 
147 | data-src 값을 background-image url 과 동일하게 설정 해주세요.
148 | 
149 | ## Events
150 | 
151 | | Name      | Description                                |
152 | | --------- | ------------------------------------------ |
153 | | `onError` | 이미지 로드 실패시 onError 가 호출 됩니다. |
154 | | `onLoad`  | 이미지가 로드되면 onLoad 가 호출 됩니다.   |
155 | 
156 | ## Slots
157 | 
158 | 이미지가 성공적으로 로드 되면 "image" slot 이 렌더링 됩니다.
159 | 
160 | 이미지가 로드 중일 때 "preloader" slot 이 렌더링됩니다.
161 | 
162 | 이미지로드에 실패하면 "error" slot 이 렌더링됩니다.
163 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | English | [한국어](./README-ko.md)
  2 | 
  3 | # Vue-load-image
  4 | 
  5 | [![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)
  6 | 
  7 | 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.
  8 | 
  9 | ## Demo
 10 | 
 11 | [vue-load-image Demo](https://john015.github.io/vue-load-image/) / [(Source Code)](https://github.com/john015/vue-load-image/tree/master/example) 
 12 | 
 13 | ## Installation
 14 | 
 15 | ### Via NPM:
 16 | 
 17 | ```bash
 18 | # for Vue 2.x
 19 | npm i vue-load-image 
 20 | 
 21 | # for Vue 3.x
 22 | npm i vue-load-image@next
 23 | ```
 24 | 
 25 | ### Via CDN:
 26 | 
 27 | ```html
 28 | <!-- for Vue 2.x -->
 29 | <script src='https://unpkg.com/vue-load-image'></script>
 30 | 
 31 | <!-- for Vue 3.x -->
 32 | <script src='https://unpkg.com/vue-load-image@next'></script>
 33 | ```
 34 | 
 35 | ## Usage
 36 | 
 37 | ### Image
 38 | 
 39 | #### Vue 2.x
 40 | 
 41 | ```js
 42 | <template>
 43 |   <div>
 44 |     <vue-load-image>
 45 |       <img slot="image" src="./image.png"/>
 46 |       <img slot="preloader" src="./image-loader.gif"/>
 47 |       <div slot="error">error message</div>
 48 |     </vue-load-image>
 49 |   </div>
 50 | </template>
 51 | 
 52 | <script>
 53 | import VueLoadImage from 'vue-load-image'
 54 | 
 55 | export default {
 56 |   components: {
 57 |     'vue-load-image': VueLoadImage
 58 |   }
 59 | }
 60 | </script>
 61 | ```
 62 | 
 63 | #### Vue 3.x
 64 | 
 65 | ```js
 66 | <template>
 67 |   <div>
 68 |     <vue-load-image>
 69 |       <template v-slot:image>
 70 |         <img src="./image.png"/>
 71 |       </template>
 72 |       <template v-slot:preloader> 
 73 |         <img src="./image-loader.gif" />
 74 |       </template>
 75 |       <template v-slot:error>Image load fails</template>
 76 |     </vue-load-image>
 77 |   </div>
 78 | </template>
 79 | 
 80 | <script>
 81 | import VueLoadImage from 'vue-load-image'
 82 | 
 83 | export default {
 84 |   components: {
 85 |     'vue-load-image': VueLoadImage
 86 |   }
 87 | }
 88 | </script>
 89 | ```
 90 | 
 91 | ### Background-image
 92 | 
 93 | #### Vue 2.x
 94 | 
 95 | ```js
 96 | <template>
 97 |   <div>
 98 |     <vue-load-image>
 99 |       <div slot="image" style="background-image: url(./image.png)" data-src='./image.png' />
100 |       <img slot="preloader" src="./image-loader.gif" />
101 |       <div slot="error">error message</div>
102 |     </vue-load-image>
103 |   </div>
104 | </template>
105 | 
106 | <script>
107 | import VueLoadImage from 'vue-load-image'
108 | 
109 | export default {
110 |   components: {
111 |     'vue-load-image': VueLoadImage
112 |   }
113 | }
114 | </script>
115 | ```
116 | 
117 | #### Vue 3.x
118 | 
119 | ```js
120 | <template>
121 |   <div>
122 |     <vue-load-image>
123 |       <template v-slot:image>
124 |         <div style="background-image: url(./image.png)" data-src='./image.png' />
125 |       </template>
126 |       <template v-slot:preloader> 
127 |         <img src="./image-loader.gif" />
128 |       </template>
129 |       <template v-slot:error>Image load fails</template>
130 |     </vue-load-image>
131 |   </div>
132 | </template>
133 | 
134 | <script>
135 | import VueLoadImage from 'vue-load-image'
136 | 
137 | export default {
138 |   components: {
139 |     'vue-load-image': VueLoadImage
140 |   }
141 | }
142 | </script>
143 | ```
144 | 
145 | #### ⚠️Notice
146 | 
147 | Set data-src to be the same as background-image url
148 | 
149 | ## Events
150 | 
151 | | Name      | Description                                          |
152 | | --------- | ---------------------------------------------------- |
153 | | `onError` | onError gets triggered when the image fails to load. |
154 | | `onLoad`  | onLoad gets triggered when the image is loaded.      |
155 | 
156 | ## Slots
157 | 
158 | `"image"` slot will be rendered when the image is successfully loaded
159 | 
160 | `"preloader"` slot will be rendered when the image is in the process of loading
161 | 
162 | `"error"` slot will be rendered when the image load fails.
163 | 


--------------------------------------------------------------------------------