feat: NuxtImageモジュールの導入-1

Author: yamageji

apps/web/app/components/TeamPageSection.vue

@@ -11,10 +11,12 @@ const props = defineProps<{
 
 const config = useRuntimeConfig()
 
-const coreTeam = config.public.staffDatasource === 'supabase' ? props.data.coreStaffs.list : teamData
-const volunteerTeam = config.public.staffDatasource === 'supabase'
-  ? props.data.volunteerStaffs.list.map((staff) => staff.name)
-  : volunteers
+const coreTeam =
+  config.public.staffDatasource === 'supabase' ? props.data.coreStaffs.list : teamData
+const volunteerTeam =
+  config.public.staffDatasource === 'supabase'
+    ? props.data.volunteerStaffs.list.map((staff) => staff.name)
+    : volunteers
 // const team = teamData
 </script>
 
@@ -32,8 +34,13 @@ const volunteerTeam = config.public.staffDatasource === 'supabase'
       <div class="team-members-container">
         <div v-for="member in coreTeam" :key="member.name" class="team-member-wrapper">
           <template v-if="member.x_id !== ''">
-            <a :href="`https://x.com/${member.x_id}`" target="_blank" :aria-label="member.name">
-              <VFAvatar :src="member.image_url" :alt="member.name" />
+            <a
+              :href="`https://x.com/${member.x_id}`"
+              target="_blank"
+              :aria-label="member.name"
+              class="team-member-link"
+            >
+              <VFAvatar :src="member.image_url" :alt="member.name" size="medium" />
             </a>
             <div class="team-member-info">
               <VFTextLink
@@ -153,6 +160,10 @@ const volunteerTeam = config.public.staffDatasource === 'supabase'
   gap: 8px;
 }
 
+.team-member-link {
+  width: 100%;
+}
+
 .team-member-name {
   --team-member-name-font-size: 0.875rem;
 

apps/web/app/components/sponsor/SponsorList.vue

@@ -22,7 +22,16 @@ const currentLocale = useLocaleCurrent().locale
           class="sponsor-list-item-link"
           :to="`${currentLocale === 'ja' ? '/' : `/${currentLocale}/`}sponsors/${item['detail_page_id']}`"
         >
-          <img class="sponsor-list-item-image" :src="item['image_url']" :alt="item.name" loading="lazy" />
+          <NuxtImg
+            class="sponsor-list-item-image"
+            :src="item['image_url']"
+            :alt="item.name"
+            width="500"
+            height="300"
+            placeholder
+            preload
+            loading="lazy"
+          />
         </NuxtLink>
       </li>
     </ul>

apps/web/app/components/ticket/NamecardSection.vue

@@ -27,7 +27,9 @@ const { locale: currentLocale } = useLocaleCurrent()
       <NuxtImg
         :src="'/namecard/namecard-samples.png'"
         alt="test"
-        placeholder
+        width="auto"
+        height="auto"
+        fit="cover"
         preload
         loading="lazy"
       />

packages/ui/components/speaker/Avatar.vue

@@ -1,21 +1,40 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 type AvatarProps = {
   src: string
   alt: string
   loading?: 'lazy' | 'eager'
+  size?: 'large' | 'medium' | 'small'
 }
-withDefaults(defineProps<AvatarProps>(), {
+const props = withDefaults(defineProps<AvatarProps>(), {
   loading: 'lazy',
+  size: 'large',
+})
+
+const size = computed(() => {
+  const size = props.size || 'large'
+  return size === 'large' ? 600 : size === 'medium' ? 344 : 206
 })
 </script>
 
 <template>
-  <NuxtImg :src="src" :alt="alt" :loading="loading" placeholder preload />
+  <NuxtImg
+    :src="src"
+    :alt="alt"
+    :loading="loading"
+    placeholder
+    preload
+    :width="size"
+    :height="size"
+    fit="cover"
+  />
 </template>
 
 <style scoped>
 img {
   width: 100%;
+  height: 100%;
   aspect-ratio: 1 / 1;
   object-fit: cover;
   border-radius: 12px;

packages/ui/components/ticket/TicketCard.vue

@@ -19,9 +19,7 @@ const props = withDefaults(defineProps<TicketCardProps>(), {
       width="928"
       height="520"
       fit="cover"
-      placeholder
       preload
-      loading="lazy"
     />
     <div class="ticket-title">
       <template v-if="!isClose">{{ props.title }}</template>