diff --git a/playground/app/pages/img-preload.vue b/playground/app/pages/img-preload.vue new file mode 100644 index 000000000..bfe7b66a3 --- /dev/null +++ b/playground/app/pages/img-preload.vue @@ -0,0 +1,40 @@ + diff --git a/src/runtime/components/NuxtImg.vue b/src/runtime/components/NuxtImg.vue index 53ecad0eb..d498adbe2 100644 --- a/src/runtime/components/NuxtImg.vue +++ b/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 } : {}), diff --git a/test/e2e/ssr.test.ts b/test/e2e/ssr.test.ts index cab6c08de..f409c7721 100644 --- a/test/e2e/ssr.test.ts +++ b/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[] = []