From 917242a567ffbbb3cd6cf467322252a5cf9194f4 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 28 Aug 2024 13:09:09 +0100
Subject: [PATCH] fix(nuxt-picture): check before accessing index

resolves #1448
---
 src/runtime/components/NuxtPicture.vue | 41 +++++++++++++++-----------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/runtime/components/NuxtPicture.vue b/src/runtime/components/NuxtPicture.vue
index 27cb1a64b..0c17a94cd 100644
--- a/src/runtime/components/NuxtPicture.vue
+++ b/src/runtime/components/NuxtPicture.vue
@@ -9,15 +9,16 @@
     >
 
     <img
+      v-if="lastSource"
       ref="imgEl"
       v-bind="{
         ...baseAttrs,
         ...(isServer ? { onerror: 'this.setAttribute(\'data-error\', 1)' } : {}),
         ...imgAttrs,
       }"
-      :src="sources[lastSourceIndex].src"
-      :sizes="sources[lastSourceIndex].sizes"
-      :srcset="sources[lastSourceIndex].srcset"
+      :src="lastSource.src"
+      :sizes="lastSource.sizes"
+      :srcset="lastSource.srcset"
     >
   </picture>
 </template>
@@ -89,24 +90,30 @@ const sources = computed<Source[]>(() => {
   })
 })
 
-const lastSourceIndex = computed(() => sources.value.length - 1)
+const lastSource = computed(() => sources.value[sources.value.length - 1])
 
 if (import.meta.server && props.preload) {
-  const link: NonNullable<Head['link']>[number] = {
-    rel: 'preload',
-    as: 'image',
-    imagesrcset: sources.value[0].srcset,
-    nonce: props.nonce,
-    ...(typeof props.preload !== 'boolean' && props.preload.fetchPriority
-      ? { fetchpriority: props.preload.fetchPriority }
-      : {}),
-  }
+  useHead({ link: () => {
+    const firstSource = sources.value[0]
+    if (!firstSource) {
+      return []
+    }
 
-  if (sources.value?.[0]?.sizes) {
-    link.imagesizes = sources.value[0].sizes
-  }
+    const link: NonNullable<Head['link']>[number] = {
+      rel: 'preload',
+      as: 'image',
+      imagesrcset: firstSource.srcset,
+      nonce: props.nonce,
+      ...(typeof props.preload !== 'boolean' && props.preload?.fetchPriority
+        ? { fetchpriority: props.preload.fetchPriority }
+        : {}),
+    }
 
-  useHead({ link: [link] })
+    if (sources.value?.[0]?.sizes) {
+      link.imagesizes = sources.value[0].sizes
+    }
+    return [link]
+  } })
 }
 
 // Only passdown supported <image> attributes