fix(nuxt-img): set imagesrcset preload when densities are set w/o sizes

playground/app/pages/img-preload.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <h1>Preload no densities or sizes prop</h1>
+    <nuxt-img
+      src="/images/colors-no-densities-or-sizes-prop.jpg"
+      width="500"
+      height="500"
+      densities="x1"
+      preload
+    />
+    <h1>Preload with densities and no sizes prop</h1>
+    <nuxt-img
+      src="/images/colors-with-densities-and-no-sizes-prop.jpg"
+      width="500"
+      height="500"
+      densities="x1 x2"
+      preload
+    />
+
+    <h1>Preload with densities and sizes prop</h1>
+    <nuxt-img
+      src="/images/colors-with-densities-and-sizes-prop.jpg"
+      width="500"
+      height="500"
+      sizes="100vw md:500px"
+      densities="x1 x2"
+      preload
+    />
+
+    <h1>Preload with densities, sizes prop and default fetch priority high</h1>
+    <nuxt-img
+      src="/images/colors-with-densities-sizes-and-fetchprio-prop.jpg"
+      width="500"
+      height="500"
+      sizes="100vw md:500px"
+      densities="x1 x2"
+      :preload="{ fetchPriority: 'high' }"
+    />
+  </div>
+</template>

src/runtime/components/NuxtImg.vue

@@ -115,7 +115,7 @@ if (import.meta.server && props.preload) {
       crossorigin: normalizedAttrs.value.crossorigin,
       href: isResponsive ? sizes.value.src : src.value,
       ...(sizes.value.sizes && { imagesizes: sizes.value.sizes }),
-      ...(hasMultipleDensities && { imagesrcset: sizes.value.srcset }),
+      ...(isResponsive && { imagesrcset: sizes.value.srcset }),
       ...(typeof props.preload !== 'boolean' && props.preload.fetchPriority
         ? { fetchpriority: props.preload.fetchPriority }
         : {}),

test/e2e/ssr.test.ts

@@ -55,6 +55,30 @@ describe('browser (ssr: true)', () => {
     })
   }
 
+  it('preloads image with correct attributes', async () => {
+    const page = await createPage()
+    await page.goto(url('/img-preload'))
+
+    const link1 = page.locator('head link[rel="preload"][as="image"][href="/_ipx/s_500x500/images/colors-no-densities-or-sizes-prop.jpg"]')
+    expect(await link1.getAttribute('imagesizes')).toBeNull()
+    expect(await link1.getAttribute('imagesrcset')).toBeNull()
+
+    const link2 = page.locator('head link[rel="preload"][as="image"][href="/_ipx/s_1000x1000/images/colors-with-densities-and-no-sizes-prop.jpg"]')
+    expect(await link2.getAttribute('imagesizes')).toBeNull()
+    expect(await link2.getAttribute('imagesrcset')).not.toBeNull()
+
+    const link3 = page.locator('head link[rel="preload"][as="image"][href="/_ipx/s_1000x1000/images/colors-with-densities-and-sizes-prop.jpg"]')
+    expect(await link3.getAttribute('imagesizes')).not.toBeNull()
+    expect(await link3.getAttribute('imagesrcset')).not.toBeNull()
+
+    const link4 = page.locator('head link[rel="preload"][as="image"][href="/_ipx/s_1000x1000/images/colors-with-densities-sizes-and-fetchprio-prop.jpg"]')
+    expect(await link4.getAttribute('imagesizes')).not.toBeNull()
+    expect(await link4.getAttribute('imagesrcset')).not.toBeNull()
+    expect(await link4.getAttribute('fetchpriority')).toBe('high')
+
+    await page.close()
+  })
+
   it('should emit load and error events', async () => {
     const page = await createPage()
     const logs: string[] = []