fix: ファーストビューに表示されない画像をloading="lazy"に修正"

Author: yamageji

apps/web/app/components/AccessPageSection.vue

@@ -63,8 +63,8 @@ const { color } = useColor()
       </div>
 
       <figure class="place_image">
-        <img src="/access/fig_access01.jpg" alt="" />
-        <img src="/access/fig_access02.jpg" alt="" />
+        <img src="/access/fig_access01.jpg" alt="" loading="lazy" />
+        <img src="/access/fig_access02.jpg" alt="" loading="lazy" />
       </figure>
 
     </div>

apps/web/app/components/CooperationPartnerSection.vue

@@ -10,9 +10,9 @@
           <source srcset="/logo/logo_vueconf-de.png" media="(min-width: 768px)" />
           <img
             src="/logo/logo_vueconf-de_sp.png"
-            loading="lazy"
             alt="vuejs.de"
             class="partner-image"
+            loading="lazy"
           />
         </picture>
       </NuxtLink>

apps/web/app/components/event/EventAsset.vue

@@ -10,7 +10,13 @@ const props = defineProps<EventAssetProps>()
 </script>
 
 <template>
-  <img :src="`/event/${title}.png`" alt="" class="eventcard-image" :style="{ marginTop: `${marginTop}px` }" />
+  <img
+    :src="`/event/${title}.png`"
+    alt=""
+    class="eventcard-image"
+    :style="{ marginTop: `${marginTop}px` }"
+    loading="lazy"
+  />
 </template>
 
 <style scoped>

apps/web/app/components/event/EventMultipleAssets.vue

@@ -16,7 +16,13 @@ const props = defineProps<EventMultipleAssetsProps>()
       '--head-img-height': `${imgHeight}px`,
     }"
   >
-    <img v-for="(title, key) in titleList" :key :src="`/event/${title}-${key + 1}.png`" alt="" />
+    <img
+      v-for="(title, key) in titleList"
+      :key
+      :src="`/event/${title}-${key + 1}.png`"
+      alt=""
+      loading="lazy"
+    />
   </div>
 </template>
 

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

@@ -22,7 +22,7 @@ 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" />
+          <img class="sponsor-list-item-image" :src="item['image_url']" :alt="item.name" loading="lazy" />
         </NuxtLink>
       </li>
     </ul>

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

@@ -24,7 +24,7 @@ const { locale: currentLocale } = useLocaleCurrent()
     </div>
 
     <div class="content-wrapper">
-      <img :src="'/namecard/namecard-samples.png'" alt="test" />
+      <img :src="'/namecard/namecard-samples.png'" alt="test" loading="lazy" />
       <div class="buttons-wrapper">
         <VFLinkButton
           class="action-button"

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

@@ -16,7 +16,7 @@ import { ticketUrl } from '~/utils/constants'
         :detail="$t(`personal_sponsor.merit${i}.detail`)"
         :caution="(i === 2 || i === 4) ? $t(`personal_sponsor.merit${i}.caution`) : ''"
       >
-        <img alt="" :src="`/sponsor/merit-${i}.jpg`" />
+        <img alt="" :src="`/sponsor/merit-${i}.jpg`" loading="lazy" />
       </VFMeritCard>
     </div>
     <div class="personal-sponsor-text">

apps/web/app/pages/sessions/[id]/index.vue

@@ -73,6 +73,7 @@ useHead({
           :name="currentLocale === 'en' ? speakerData[0].name_en : speakerData[0].name_ja"
           :github-id="speakerData[0].github_id"
           :x-id="speakerData[0].x_id"
+          loading="eager"
         />
         <div class="person-info">
           {{ currentLocale === 'ja' ? speakerData[0].description_ja : speakerData[0].description_en }}

packages/ui/components/speaker/Avatar.vue

@@ -2,13 +2,15 @@
 type AvatarProps = {
   src: string
   alt: string
+  loading?: 'lazy' | 'eager'
 }
-
-defineProps<AvatarProps>()
+withDefaults(defineProps<AvatarProps>(), {
+  loading: 'lazy',
+})
 </script>
 
 <template>
-  <img :src="src" :alt="alt" />
+  <img :src="src" :alt="alt" :loading="loading" />
 </template>
 
 <style scoped>

packages/ui/components/speaker/Speaker.vue

@@ -11,16 +11,24 @@ type SpeakerProps = {
   githubId?: string
   xId?: string
   rowPosition?: boolean
+  loading?: 'lazy' | 'eager'
 }
 
-defineProps<SpeakerProps>()
+withDefaults(defineProps<SpeakerProps>(), {
+  company: '',
+  division: '',
+  githubId: '',
+  xId: '',
+  rowPosition: false,
+  loading: 'lazy',
+})
 
 const { color } = useColor()
 </script>
 
 <template>
   <div class="speaker-wrapper" :style="rowPosition ? '' : 'flex-direction: column;'">
-    <Avatar :src="image" :alt="name" />
+    <Avatar :src="image" :alt="name" :loading="loading" />
     <div class="speaker-info">
       <div class="speaker-affiliation">
         <p