Bugfix/2573 pictures after comming back to online

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Orders with invalid address don't stack anymore in the queue and have proper notification popup - @AndreiBelokopytov, @lukeromanowicz (#2663)
 - Offline orders with out of stock products don't stack anymore and get canceled after going back to online - @lukeromanowicz (#2740)
 - Build ServiceWorker on Docker - @patzick (#2793)
+- Product image load after comming back to online - @patzick (#2573)
 
 ## [1.9.0-rc.2] - 2019.04.10
 

src/themes/default/components/core/ProductGalleryCarousel.vue

@@ -25,21 +25,25 @@
             :alt="productName | htmlDecode"
           >
           <img
+            v-if="!lowerQualityImagesErrorsMap[index] || isOnline"
             v-show="lowerQualityImagesMap[index]"
             key="lowQualityImage"
             class="product-image inline-flex mw-100"
             :src="images.loading"
-            @load="lowerQualityImageLoaded(index)"
+            @load="lowerQualityImageLoaded(index, true)"
+            @error="lowerQualityImageLoaded(index, false)"
             ref="images"
             :alt="productName | htmlDecode"
             data-testid="productGalleryImage"
             itemprop="image"
           >
           <img
+            v-if="!highQualityImagesErrorsMap[index] || isOnline"
             v-show="highQualityImagesLoadedMap[index]"
             key="highQualityImage"
             :src="images.src"
-            @load="highQualityImageLoaded(index)"
+            @load="highQualityImageLoaded(index, true)"
+            @error="highQualityImageLoaded(index, false)"
             class="product-image inline-flex pointer mw-100"
             ref="images"
             @dblclick="openOverlay"
@@ -66,6 +70,7 @@
 import store from '@vue-storefront/core/store'
 import { Carousel, Slide } from 'vue-carousel'
 import ProductVideo from './ProductVideo'
+import { onlineHelper } from '@vue-storefront/core/helpers'
 
 export default {
   name: 'ProductGalleryCarousel',
@@ -94,7 +99,9 @@ export default {
       currentPage: 0,
       hideImageAtIndex: null,
       lowerQualityImagesLoadedMap: {},
-      highQualityImagesLoadedMap: {}
+      highQualityImagesLoadedMap: {},
+      lowerQualityImagesErrorsMap: {},
+      highQualityImagesErrorsMap: {}
     }
   },
   computed: {
@@ -118,6 +125,9 @@ export default {
         visibilityMap[index] = !!this.highQualityImagesLoadedMap[index] && this.hideImageAtIndex !== index
       })
       return visibilityMap
+    },
+    isOnline () {
+      return onlineHelper.isOnline
     }
   },
   beforeMount () {
@@ -171,11 +181,13 @@ export default {
     onVideoStarted (index) {
       this.hideImageAtIndex = index
     },
-    lowerQualityImageLoaded (index) {
-      this.$set(this.lowerQualityImagesLoadedMap, index, true)
+    lowerQualityImageLoaded (index, success = true) {
+      this.$set(this.lowerQualityImagesLoadedMap, index, success)
+      this.$set(this.lowerQualityImagesErrorsMap, index, !success)
     },
-    highQualityImageLoaded (index) {
-      this.$set(this.highQualityImagesLoadedMap, index, true)
+    highQualityImageLoaded (index, success = true) {
+      this.$set(this.highQualityImagesLoadedMap, index, success)
+      this.$set(this.highQualityImagesErrorsMap, index, !success)
     }
   }
 }