Skip to content

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

Merged
teemingc merged 2 commits into
sveltejs:mainfrom
b84330808:fix/enhanced-img-dynamic-dimensions
Nov 1, 2026
Merged

teemingc merged 2 commits into
sveltejs:mainfrom
b84330808:fix/enhanced-img-dynamic-dimensions

Conversation

@b84330808

Copy link
Copy Markdown
Contributor

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:

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 <[email protected]>
@pkg-svelte-dev

pkg-svelte-dev Bot commented Oct 20, 2026 •

Copy link
Copy Markdown

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

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

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: ca86ad7

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

@teemingc
teemingc merged commit 18cf025 into sveltejs:main Nov 1, 2026
37 of 38 checks passed
@github-actions github-actions Bot mentioned this pull request Nov 1, 2026
teemingc pushed a commit that referenced this pull request Nov 10, 2026
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @sveltejs/[email protected]

### Minor Changes

- feat: Add clickable links to remote function invocation in dev server
logs ([#17547](#17547))

### Patch Changes

- fix: reject URL inputs in `resolve`
([#17627](#17627))

- fix: respond with JSON instead of rendering the error page for a
`__data.json` request to a missing route
([#17630](#17630))

- fix: resolve relative paths against the page URL in data requests when
`paths.relative` is `true`
([#17630](#17630))

- fix: reject binary remote forms referencing files with an empty
file-offset table as 400 Bad Request
([#17579](#17579))

- fix: correctly populate route and params for `afterNavigate` during
hydration ([#17577](#17577))

- fix: include assets imported through dynamic imports, remote functions
and param matchers in `builder.findServerAssets` so that `read` can find
them ([#17505](#17505))

- fix: set `navigation.from` to `null` in `afterNavigate` on start when
SSR is disabled ([#17587](#17587))

- fix: include remote function name and declaration file in schema
validation failure logs
([#17495](#17495))

- fix: reuse SSR results of remote functions from packages during
hydration in dev ([#17604](#17604))

- fix: remove empty type output directories for removed routes
([#17472](#17472))

- fix: use the UTF-8 byte length when reading inline assets
([#17590](#17590))

- chore: simplify a few server and build helpers
([#17531](#17531))

- fix: ignore the query string and hash of an imported asset's URL when
using `read` ([#17507](#17507))

- fix: avoid reloading unrelated server modules when saving files during
development ([#17462](#17462))
## @sveltejs/[email protected]

### Patch Changes

- fix: apply the Vite config and plugins of the detected adapter
([#17572](#17572))
- Updated dependencies:
  - @sveltejs/[email protected]
## @sveltejs/[email protected]

### Patch Changes

- fix: serve client and prerendered files whichever way the request path
is percent-encoded, and allow `*` and a leading `:` in their filenames
([#17123](#17123))

- perf: let Bun serve immutable files without calling into JavaScript
([#17123](#17123))

- fix: support the `ORIGIN` environment variable when `paths.origin` is
not set ([#17632](#17632))
- Updated dependencies:
  - @sveltejs/[email protected]
## @sveltejs/[email protected]

### Patch Changes

- fix: ignore `Range` headers on `HEAD` requests for static assets
([#17602](#17602))

- fix: respond with a 500 instead of crashing the server when handling a
request fails unexpectedly
([#17696](#17696))

- fix: support the `ORIGIN` environment variable when `paths.origin` is
not set ([#17632](#17632))
- Updated dependencies:
  - @sveltejs/[email protected]
## @sveltejs/[email protected]

### Patch Changes

- fix: accept every Node.js version from 26 (`nodejs27.x`, `nodejs28.x`,
...), not only even ones
([#17584](#17584))

- fix: serve prerendered pages when `paths.base` is set
([#17525](#17525))
- Updated dependencies:
  - @sveltejs/[email protected]
## @sveltejs/[email protected]

### Patch Changes

- fix: compute the missing `width` or `height` at runtime for images
imported in the script, instead of outputting `NaN`
([#17499](#17499))

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
github-actions Bot added a commit to clement-songis/sveltekit-adapter-bun that referenced this pull request Nov 14, 2026
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @sveltejs/[email protected]

### Minor Changes

- feat: Add clickable links to remote function invocation in dev server
logs ([#17547](sveltejs/kit#17547))

### Patch Changes

- fix: reject URL inputs in `resolve`
([#17627](sveltejs/kit#17627))

- fix: respond with JSON instead of rendering the error page for a
`__data.json` request to a missing route
([#17630](sveltejs/kit#17630))

- fix: resolve relative paths against the page URL in data requests when
`paths.relative` is `true`
([#17630](sveltejs/kit#17630))

- fix: reject binary remote forms referencing files with an empty
file-offset table as 400 Bad Request
([#17579](sveltejs/kit#17579))

- fix: correctly populate route and params for `afterNavigate` during
hydration ([#17577](sveltejs/kit#17577))

- fix: include assets imported through dynamic imports, remote functions
and param matchers in `builder.findServerAssets` so that `read` can find
them ([#17505](sveltejs/kit#17505))

- fix: set `navigation.from` to `null` in `afterNavigate` on start when
SSR is disabled ([#17587](sveltejs/kit#17587))

- fix: include remote function name and declaration file in schema
validation failure logs
([#17495](sveltejs/kit#17495))

- fix: reuse SSR results of remote functions from packages during
hydration in dev ([#17604](sveltejs/kit#17604))

- fix: remove empty type output directories for removed routes
([#17472](sveltejs/kit#17472))

- fix: use the UTF-8 byte length when reading inline assets
([#17590](sveltejs/kit#17590))

- chore: simplify a few server and build helpers
([#17531](sveltejs/kit#17531))

- fix: ignore the query string and hash of an imported asset's URL when
using `read` ([#17507](sveltejs/kit#17507))

- fix: avoid reloading unrelated server modules when saving files during
development ([#17462](sveltejs/kit#17462))
## @sveltejs/[email protected]

### Patch Changes

- fix: apply the Vite config and plugins of the detected adapter
([#17572](sveltejs/kit#17572))
- Updated dependencies:
  - @sveltejs/[email protected]
## @sveltejs/[email protected]

### Patch Changes

- fix: serve client and prerendered files whichever way the request path
is percent-encoded, and allow `*` and a leading `:` in their filenames
([#17123](sveltejs/kit#17123))

- perf: let Bun serve immutable files without calling into JavaScript
([#17123](sveltejs/kit#17123))

- fix: support the `ORIGIN` environment variable when `paths.origin` is
not set ([#17632](sveltejs/kit#17632))
- Updated dependencies:
  - @sveltejs/[email protected]
## @sveltejs/[email protected]

### Patch Changes

- fix: ignore `Range` headers on `HEAD` requests for static assets
([#17602](sveltejs/kit#17602))

- fix: respond with a 500 instead of crashing the server when handling a
request fails unexpectedly
([#17696](sveltejs/kit#17696))

- fix: support the `ORIGIN` environment variable when `paths.origin` is
not set ([#17632](sveltejs/kit#17632))
- Updated dependencies:
  - @sveltejs/[email protected]
## @sveltejs/[email protected]

### Patch Changes

- fix: accept every Node.js version from 26 (`nodejs27.x`, `nodejs28.x`,
...), not only even ones
([#17584](sveltejs/kit#17584))

- fix: serve prerendered pages when `paths.base` is set
([#17525](sveltejs/kit#17525))
- Updated dependencies:
  - @sveltejs/[email protected]
## @sveltejs/[email protected]

### Patch Changes

- fix: compute the missing `width` or `height` at runtime for images
imported in the script, instead of outputting `NaN`
([#17499](sveltejs/kit#17499))

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
dadezzz pushed a commit to dadezzz/events-cash-register that referenced this pull request Nov 14, 2026
This PR contains the following updates:

| Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) |
|---|---|---|---|
| [@sveltejs/enhanced-img](https://svelte.dev/docs/kit/images#sveltejs-enhanced-img) ([source](https://github.com/sveltejs/kit/tree/HEAD/packages/enhanced-img)) | [`1.0.0` → `1.0.1`](https://renovatebot.com/diffs/npm/@sveltejs%2fenhanced-img/1.0.0/1.0.1) | ![age](https://developer.mend.io/api/mc/badges/age/npm/@sveltejs%2fenhanced-img/1.0.1?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@sveltejs%2fenhanced-img/1.0.0/1.0.1?slim=true) |

---

### Release Notes

<details>
<summary>sveltejs/kit (@&#8203;sveltejs/enhanced-img)</summary>

### [`v1.0.1`](https://github.com/sveltejs/kit/blob/HEAD/packages/enhanced-img/CHANGELOG.md#101)

[Compare Source](https://github.com/sveltejs/kit/compare/@sveltejs/[email protected]...@sveltejs/[email protected])

##### Patch Changes

- fix: compute the missing `width` or `height` at runtime for images imported in the script, instead of outputting `NaN` ([#&#8203;17499](sveltejs/kit#17499))

</details>

---

### Configuration

📅 **Schedule**: (UTC)

- Branch creation
  - At any time (no schedule defined)
- Automerge
  - At any time (no schedule defined)

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Mend Renovate CLI](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0NC4yMzcuMCIsInVwZGF0ZWRJblZlciI6IjQ0LjIzNy4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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

2 participants