refactor: my-sanity-image component

GuMengYu · May 4, 2024 · ee04d54 · ee04d54
1 parent 4d70b22
commit ee04d54
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 7 deletions.
diff --git a/packages/app/components/InstantFilmPile.client.vue b/packages/app/components/InstantFilmPile.client.vue
@@ -90,8 +90,8 @@ whenever(() => goneCards.size === props.instantFilms.length, async () => {
             :enter="enterVariant(i)"
             :class="goneCards.size === instantFilms.length - i - 1 ? 'pointer-events-auto' : 'pointer-events-none'"
         >
-            <nuxt-img
-                provider="mySanity" :src="card.image.asset._id" :width="720" :height="720"
+            <my-sanity-image
+                :src="card.image.asset._id" :width="720" :height="720"
                 :class="[
                     card.orientation === 'landscape'
                         ? 'w-[224px] h-[168px] lg:w-[256px] lg:h-[192px]'

diff --git a/packages/app/components/InstantFilmPile.server.vue b/packages/app/components/InstantFilmPile.server.vue
@@ -8,6 +8,6 @@ const props = defineProps<{
 
 <template>
     <div v-for="card in instantFilms" :key="card.image.asset._id" class="hidden">
-        <nuxt-img provider="mySanity" :src="card.image.asset._id" preload :width="1440" :height="1440" />
+        <my-sanity-image :src="card.image.asset._id" preload :width="1440" :height="1440" />
     </div>
 </template>
diff --git a/packages/app/components/MySanityImage.vue b/packages/app/components/MySanityImage.vue
@@ -0,0 +1,3 @@
+<template>
+    <nuxt-img provider="mySanity" />
+</template>
diff --git a/packages/app/components/photography/Cover.vue b/packages/app/components/photography/Cover.vue
@@ -15,8 +15,7 @@ const localePath = useLocalePath()
             class="cover relative h-full"
         >
             <div class="image-wrapper h-full">
-                <nuxt-img
-                    provider="mySanity"
+                <my-sanity-image
                     :src="item.coverImage.asset._id"
                     fit="cover" width="330px" height="330px" densities="x1 x2"
                     :placeholder="item.coverImage.asset.metadata.lqip!"

diff --git a/packages/app/pages/work/index.vue b/packages/app/pages/work/index.vue
@@ -16,8 +16,7 @@ const { data } = await useFetch<Project[]>('/api/projects')
             <div v-for="item in data" :key="item.id" class="flex flex-col md:flex-row space-x-4 p-4">
                 <div class="mb-6 md:mb-0 w-4/5 md:w-[200px] xl:w-[240px] self-center md:self-auto">
                     <ui-aspect-ratio :ratio="16 / 10">
-                        <nuxt-img
-                            provider="mySanity"
+                        <my-sanity-image
                             :src="item.coverImage.asset._id"
                             fit="cover" height="330px" densities="x1 x2"
                             :placeholder="item.coverImage.asset.metadata.lqip!"