Skip to content

fix(enhanced-img): compute the missing dimension at runtime for imported images - #17499

Open
b84330808 wants to merge 1 commit into
sveltejs:mainfrom
b84330808:fix/enhanced-img-dynamic-dimensions
Open

b84330808 wants to merge 1 commit into
sveltejs:mainfrom
b84330808:fix/enhanced-img-dynamic-dimensions

Conversation

@b84330808

Copy link
Copy Markdown

closes #12727

When enhanced:img gets an image imported in the script (src={example}), its size is only known at runtime, so the plugin passes {example.img.w} and {example.img.h} to serialize_img_attributes. If the user sets only width (or only height), the other one is computed with parseInt on those strings, which gives height=NaN (or width=NaN).

In that case the plugin now outputs an expression that does the same calculation at runtime, for example height={Math.round((example.img.h * 280) / example.img.w)}. Static images keep the number computed at build time.

The snapshot test gets a width-only and a height-only case with an imported image, and now checks that the output contains no NaN. It fails without this change.

I used Claude Code to write this change.


Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests

  • Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

I ran the @sveltejs/enhanced-img unit tests and its check, plus oxfmt --check and ESLint on the changed files, not the full pnpm test.

Changesets

  • If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

Edits

  • Please ensure that 'Allow edits from maintainers' is checked. PRs without this option may be closed.

…ted images

When the image is only known at runtime, its width and height are
`{x.img.w}` / `{x.img.h}` expressions, which `parseInt` turned into NaN.
Output an expression that scales them instead.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@pkg-svelte-dev

Copy link
Copy Markdown

Install the latest version of @sveltejs/kit from ed86c66:

pnpm add https://pkg.svelte.dev/@sveltejs/kit/c/ed86c665756b63876f126f8c46a18a1bac1f7afd

Open in pkg.svelte.dev: https://pkg.svelte.dev/repos/kit/pr/17499

Note

This PR is from a fork. A maintainer must approve approve each commit before it can be built and installed.

@changeset-bot

changeset-bot Bot commented Oct 20, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: ed86c66

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@sveltejs/enhanced-img Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

enhanced:img returns NaN height when image is imported within script block

1 participant