perf: use image lazy loading

nuxt · Oct 20, 2024 · 52ff12b · 52ff12b
1 parent ce0d8ea
commit 52ff12b
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 1 deletion.
diff --git a/components/AppHero.vue b/components/AppHero.vue
@@ -14,7 +14,7 @@
       />
     </div>
     <img
-      :src="`hero-starter.svg`"
+      src="/hero-starter.svg"
       width="385"
       height="216"
       class="hidden md:block w-full h-full justify-self-center md:justify-self-end md:col-span-3"

diff --git a/components/NuxtDropdown.vue b/components/NuxtDropdown.vue
@@ -52,6 +52,7 @@ const links = [
               :aria-label="link.arialabel"
             >
               <img
+                loading="lazy"
                 class="text-white w-6 h-6 self-center"
                 src="/nuxt.svg"
               >

diff --git a/components/StarterCard.vue b/components/StarterCard.vue
@@ -25,6 +25,7 @@ const command = computed(() => {
       <div class="flex flex-col gap-y-4 justify-center items-center w-full">
         <img
           :src="starter.image"
+          loading="lazy"
           width="40"
           height="40"
           :alt="starter.name"