feat(default-theme): Improve SwImage component when no thumbnail (#1936)

vuestorefront · Aug 12, 2022 · 2c8b383 · 2c8b383
1 parent 4a312ed
commit 2c8b383
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/packages/default-theme/src/cms/elements/CmsElementImage.vue b/packages/default-theme/src/cms/elements/CmsElementImage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="imagesUrl && imagesUrl.length">
+  <div v-if="(imagesUrl && imagesUrl.length) || imgUrl">
     <SwLink
       v-if="link"
       :link="link"
@@ -8,6 +8,7 @@
     >
       <SwImage
         :srcset="imagesUrl"
+        :src="imgUrl"
         :title="title"
         :alt="alt"
         :loading="lazyLoad"
@@ -17,6 +18,7 @@
     <SwImage
       v-else
       :srcset="imagesUrl"
+      :src="imgUrl"
       :title="title"
       :alt="alt"
       :loading="lazyLoad"
@@ -61,6 +63,10 @@ export default {
       return this.getMedia?.thumbnails ?? []
     },
 
+    imgUrl() {
+      return getResizedImage(this.getMedia && this.getMedia.url)
+    },
+
     lazyLoad() {
       return "lazy"
     },

diff --git a/packages/default-theme/src/components/atoms/SwImage.vue b/packages/default-theme/src/components/atoms/SwImage.vue
@@ -28,9 +28,16 @@ export default {
       resolution: item.width
       })) ?? []
     )
-    const imgUrl = computed(() => props.srcset?.reduce(function (res, thumb) {
-      return thumb.width < res.width ? thumb : res;
-    })?.url ?? props.src)
+    const imgUrl = computed(() => {
+      if (props.srcset && props.srcset.length) {
+        return props.srcset.reduce(
+          (res, thumb) => (thumb.width < res.width ? thumb : res),
+          props.srcset[0]
+        )?.url ?? props.src
+      } else {
+        return props.src
+      }
+    });
 
     return {
       placeholder: getPlaceholderImage(width, height),