fix: apply preset sizes when component sizes prop is undefined #1919

tyminko · 2025-08-10T15:18:50Z

🔧 Fix

Fixes #1918

Problem

When using image presets with defined sizes, the preset sizes are not applied if the component's sizes prop is undefined. This causes fallback to density-based srcset instead of the expected width-based srcset from presets.

Changes Made

Enhanced getSizes function (src/runtime/image.ts):
- Added proper preset merging using defu
- Ensures preset sizes and densities are used when not overridden by component props
Updated components (NuxtImg.vue, NuxtPicture.vue):
- Only pass sizes and densities props when explicitly defined (!== undefined)
- Prevents undefined from overriding preset values
Added tests:
- Test for preset sizes application when component sizes is undefined
- Test for preset densities application when component densities is undefined

Before vs After

Before: /_ipx/s_300x400/image.png 1x, /_ipx/s_600x800/image.png 2x (density-based)
After: /_ipx/s_320x427/image.png 320w, /_ipx/s_640x853/image.png 640w, /_ipx/s_1024x1365/image.png 1024w (width-based from preset)

Testing

✅ All existing tests pass (26/26 image tests)
✅ New tests verify the fix works correctly
✅ Linting passes (pnpm lint)
✅ Build succeeds (pnpm build)
✅ No regressions in core functionality

Breaking Changes

None. This is a bug fix that makes the behavior match the documented/expected behavior.

- Enhanced getSizes function to properly merge preset options using defu - Updated NuxtImg and NuxtPicture components to only pass sizes/densities when explicitly defined - Added tests to verify preset sizes and densities are correctly applied - Fixes issue where undefined props override preset values causing incorrect srcset generation Resolves density-based fallback when width-based srcset should be used from presets Fixes nuxt#1918

vercel · 2025-08-10T15:18:54Z

@tyminko is attempting to deploy a commit to the NuxtLabs Team on Vercel.

A member of the Team first needs to authorize it.

pkg-pr-new · 2025-08-10T15:19:48Z

Open in StackBlitz

npm i https://pkg.pr.new/@nuxt/image@1919

commit: 79fd5ef

danielroe · 2025-10-30T09:58:20Z

src/runtime/components/NuxtPicture.vue

  return formats.map((format) => {
    const { srcset, sizes, src } = $img.getSizes(props.src!, {
      ...providerOptions.value,
-      sizes: props.sizes || $img.options.screens,


it looks like we lose this behaviour - should we pass screens as a fallback in getSizes?

…fined-props

codecov-commenter · 2025-10-30T11:48:43Z

Codecov Report

❌ Patch coverage is 0% with 7 lines in your changes missing coverage. Please review.
✅ Project coverage is 7.02%. Comparing base (b4b8b0e) to head (79fd5ef).
⚠️ Report is 2 commits behind head on main.

Files with missing lines	Patch %	Lines
src/runtime/image.ts	0.00%	7 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##            main   #1919      +/-   ##
========================================
- Coverage   7.03%   7.02%   -0.02%     
========================================
  Files         77      77              
  Lines       3567    3573       +6     
  Branches     138     138              
========================================
  Hits         251     251              
- Misses      3268    3274       +6     
  Partials      48      48

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

…fined-props

danielroe · 2025-10-30T13:07:56Z

test/nuxt/picture.test.ts

    expect(img.html()).toMatchInlineSnapshot(`
      "<picture>
-        <source type="image/webp" sizes="(max-width: 768px) 640px, (max-width: 1024px) 768px, (max-width: 1280px) 1024px, (max-width: 1536px) 1280px, 1536px" srcset="/_ipx/f_webp&amp;s_640x640/image.png 640w, /_ipx/f_webp&amp;s_768x768/image.png 768w, /_ipx/f_webp&amp;s_1024x1024/image.png 1024w, /_ipx/f_webp&amp;s_1280x1280/image.png 1280w, /_ipx/f_webp&amp;s_1536x1536/image.png 1536w, /_ipx/f_webp&amp;s_2048x2048/image.png 2048w, /_ipx/f_webp&amp;s_2560x2560/image.png 2560w, /_ipx/f_webp&amp;s_3072x3072/image.png 3072w"><img width="200" height="200" data-nuxt-pic="" src="/_ipx/f_png&amp;s_3072x3072/image.png" sizes="(max-width: 768px) 640px, (max-width: 1024px) 768px, (max-width: 1280px) 1024px, (max-width: 1536px) 1280px, 1536px" srcset="/_ipx/f_png&amp;s_640x640/image.png 640w, /_ipx/f_png&amp;s_768x768/image.png 768w, /_ipx/f_png&amp;s_1024x1024/image.png 1024w, /_ipx/f_png&amp;s_1280x1280/image.png 1280w, /_ipx/f_png&amp;s_1536x1536/image.png 1536w, /_ipx/f_png&amp;s_2048x2048/image.png 2048w, /_ipx/f_png&amp;s_2560x2560/image.png 2560w, /_ipx/f_png&amp;s_3072x3072/image.png 3072w">
+        <source type="image/webp" srcset="/_ipx/f_webp&amp;s_200x200/image.png 1x, /_ipx/f_webp&amp;s_400x400/image.png 2x"><img width="200" height="200" data-nuxt-pic="" src="/_ipx/f_png&amp;s_400x400/image.png" srcset="/_ipx/f_png&amp;s_200x200/image.png 1x, /_ipx/f_png&amp;s_400x400/image.png 2x">


added a test to show that omitting $img.screens changes behaviour

danielroe

thank you!

happy to follow up with another PR to discuss how to use screens as a default (either in img or picture).

I'm aware that preset sizes still do not override screens (for <NuxtPicture>) and this needs more attention.

tyminko requested a review from danielroe as a code owner August 10, 2025 15:18

Merge branch 'main' into fix/preset-sizes-undefined-props

31b719a

danielroe reviewed Oct 30, 2025

View reviewed changes

danielroe added 2 commits October 30, 2025 11:45

test: bump bundle size

0c3c9c7

Merge remote-tracking branch 'origin/main' into fix/preset-sizes-unde…

9929f2d

…fined-props

danielroe added 5 commits October 30, 2025 12:40

Merge remote-tracking branch 'origin/main' into fix/preset-sizes-unde…

6c2e996

…fined-props

chore: revert formatting (for easier diff)

3d7dbda

chore: avoid unnecessary spreading

439365c

Merge remote-tracking branch 'origin/main' into fix/preset-sizes-unde…

5d7054b

…fined-props

test: update snapshot

a7e4127

danielroe reviewed Oct 30, 2025

View reviewed changes

danielroe added 4 commits October 30, 2025 13:11

fix: provide screens as size options if densities are not provided

56a42f6

fix: move screens back -> NuxtPicture

3c5bdf2

chore: update bundle size

6b1f16e

perf: avoid double trim

79fd5ef

danielroe approved these changes Oct 31, 2025

View reviewed changes

danielroe merged commit 7c0555d into nuxt:main Oct 31, 2025
7 checks passed

This was referenced Oct 30, 2025

v2.0.0 #1812

Merged

v3.0.0 #2010

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: apply preset sizes when component sizes prop is undefined #1919

fix: apply preset sizes when component sizes prop is undefined #1919

Uh oh!

tyminko commented Aug 10, 2025

Uh oh!

vercel bot commented Aug 10, 2025

Uh oh!

pkg-pr-new bot commented Aug 10, 2025 •

edited

Loading

Uh oh!

danielroe Oct 30, 2025 •

edited

Loading

Uh oh!

codecov-commenter commented Oct 30, 2025 •

edited

Loading

Uh oh!

danielroe Oct 30, 2025

Uh oh!

danielroe left a comment •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix: apply preset sizes when component sizes prop is undefined #1919

fix: apply preset sizes when component sizes prop is undefined #1919

Uh oh!

Conversation

tyminko commented Aug 10, 2025

🔧 Fix

Problem

Changes Made

Before vs After

Testing

Breaking Changes

Uh oh!

vercel bot commented Aug 10, 2025

Uh oh!

pkg-pr-new bot commented Aug 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

danielroe Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov-commenter commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

danielroe Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

danielroe left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pkg-pr-new bot commented Aug 10, 2025 •

edited

Loading

danielroe Oct 30, 2025 •

edited

Loading

codecov-commenter commented Oct 30, 2025 •

edited

Loading

danielroe left a comment •

edited

Loading