fix(lightbox): fix siteloading and v-lazy

pexea12 · Jul 8, 2020 · 087424b · 087424b
1 parent 3c1f556
commit 087424b
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -148,7 +148,7 @@ How to use:
     <tr>
       <td>siteLoading</td>
       <td></td>
-      <td>null</td>
+      <td>String</td>
       <td>default image when your image is error or loading</td>
     </tr>
     <tr>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-image-lightbox",
   "description": "A Vue.js package to display an image gallery lightbox",
-  "version": "7.1.0",
+  "version": "7.1.1",
   "author": "Nguyen P. Thien Dzung <dzungnguyenvn@outlook.com>",
   "license": "MIT",
   "main": "dist/vue-image-lightbox.min.js",

diff --git a/src/App.vue b/src/App.vue
@@ -24,6 +24,7 @@
         :media="media"
         :show-caption="true"
         :show-light-box="false"
+        :site-loading="siteLoading"
       />
     </div>
   </div>

diff --git a/src/components/LightBox.vue b/src/components/LightBox.vue
@@ -31,7 +31,11 @@
             <img
               v-if="media[select].type !== 'video'"
               :key="media[select].src"
-              :src="media[select].src"
+              v-lazy="{
+                src: media[select].src,
+                loading: media[select].src,
+                error: media[select].src,
+              }"
               :srcset="media[select].srcset || ''"
               class="vue-lb-modal-image"
               :alt="media[select].caption"
@@ -99,8 +103,8 @@
           <div
             v-for="(image, index) in imagesThumb"
             v-show="index >= thumbIndex.begin && index <= thumbIndex.end"
-            :key="typeof image.thumb === 'string' ? `${image.thumb}${index}` : index"
-            v-lazy:background-image="image.thumb"
+            :key="typeof image.src === 'string' ? `${image.src}${index}` : index"
+            v-lazy:background-image="image"
             :class="'vue-lb-modal-thumbnail' + (select === index ? '-active' : '')"
             @click.stop="showImage(index)"
           >
@@ -220,8 +224,8 @@ export default {
     },
 
     siteLoading: {
-      type: Object,
-      default: null,
+      type: String,
+      default: '',
     },
 
     showCaption: {
@@ -300,7 +304,10 @@ export default {
         }))
       }
 
-      return this.media.map(({ thumb, type }) => ({ thumb, type }))
+      return this.media.map(({ thumb, type }) => ({
+        src: thumb,
+        type,
+      }))
     }
   },