Fix/hero large srcset (#695)

* adding srcset for HeroImage * changeset
nasa-jpl · Nov 12, 2024 · c06cf28 · c06cf28
1 parent 0881a4f
commit c06cf28
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/.changeset/popular-spoons-pull.md b/.changeset/popular-spoons-pull.md
@@ -0,0 +1,5 @@
+---
+"@explorer-1/vue": patch
+---
+
+Adding srcset to HeroLarge component
diff --git a/packages/vue/src/components/HeroLarge/HeroLarge.vue b/packages/vue/src/components/HeroLarge/HeroLarge.vue
@@ -4,7 +4,7 @@
       <picture v-if="image && image.src">
         <source
           media="(min-width: 768px)"
-          :srcset="image.srcSet"
+          :srcset="theSrcSet"
         />
         <source
           media="(min-width: 420px)"
@@ -71,7 +71,7 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { mixinTransparentHeader } from './../../utils/mixins'
+import { mixinTransparentHeader, mixinGetSrcSet } from './../../utils/mixins'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
 import BasePill from './../BasePill/BasePill.vue'
@@ -119,7 +119,14 @@ export default defineComponent({
     }
   },
   computed: {
-    ...mapStores(useThemeStore)
+    ...mapStores(useThemeStore),
+    theSrcSet() {
+      return this.image
+        ? mixinGetSrcSet(this.image)
+          ? mixinGetSrcSet(this.image)
+          : this.image.srcSet
+        : undefined
+    }
   },
   mounted() {
     mixinTransparentHeader()