image swap logic implemented

components/BackgroundImageLoader.vue

@@ -1,10 +1,16 @@
 <template>
   <div class="background-image-loader">
     <div class="background-container">
-      <div class="background background-loading"
-           :style="loadingStyle"></div>
+      <div class="background background-default"
+           :style="backgroundDefaultStyle">
+      </div>
+      <transition name="fade">
         <div class="background background-img"
-           :style="backgroundStyle"></div>
+             :key="loadedImageUrl"
+             :style="backgroundStyle"
+        >
+        </div>
+      </transition>
     </div>
   </div>
 </template>
@@ -16,42 +22,62 @@ export default {
   mixins: [ imageLoader ],
 
   props: {
-    bgLoading: {
+    imageUrl: {
       type: String,
       required: false,
       default: function () {
-        return 'linear-gradient(310deg, #35405d, #6174aa, #a8b3d0, #e2e5ef)'
-      }
-    },
-    img: {
-      type: String,
-      required: false,
-      default: function () {
-        return 'url(https://via.placeholder.com/1920x1080)'
+        return null
       }
     },
   },
 
   data () {
     return {
+      loadedImageUrl: null,
     }
   },
 
   computed: {
-    loadingStyle () {
+    backgroundDefaultStyle () {
       return {
-        background: this.bgLoading
+        background:  'linear-gradient(310deg, #35405d, #6174aa, #a8b3d0, #e2e5ef)'
       }
     },
     backgroundStyle () {
-      return {
-        backgroundImage: this.img
+      let style = {}
+      if (this.loadedImageUrl) {
+        style.backgroundImage = `url(${this.loadedImageUrl})`
       }
+
+      return style
     }
   },
 
-  methods: {
+  watch: {
+    imageUrl () {
+      if (this.imageUrl) {
+        this.setImage(this.imageUrl)
       }
+    },
+  },
+
+  mounted () {
+    this.setImage(this.imageUrl)
+  },
+
+  methods: {
+    setImage(url) {
+      if (url === null) { return }
+      this.loadImage(url)
+        .then(img => {
+          this.loadedImageUrl = img.src
+          this.$emit('imageLoaded', img)
+        })
+        .catch(err => {
+          this.$emit('imageLoadError', err)
+        })
+    },
+  },
 }
 </script>
 
@@ -74,6 +100,20 @@ export default {
 .background-img {
   background-size: cover;
   background-position: center center;
-  opacity: .5;
+  opacity: 1;
+}
+
+.fade {
+  &-enter-active {
+    transition: opacity 2s 1s;
+  }
+
+  &-leave-active {
+    transition: opacity 3s;
+  }
+
+  &-enter, &-leave-to {
+    opacity: 0;
+  }
 }
 </style>