`enhanced:img` does not support dynamically provided SVGs
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the bug
On the server I use a dynamic import
import.meta.glob("./images/*.{png,svg}", { query: { enhanced: true } })
And when on the client inside a {#each} block I display each image using <enhanced:img src={image} />, I get the following exception :
TypeError: Cannot read properties of undefined (reading 'src')
Looking at the implementation it seems that the enhanced:img package is supposed to support this at runtime with the following code
But it generates the following code :
if (typeof image === "string") {
$$payload.out += "<!--[-->";
$$payload.out += `<img${attr("src", image.img.src)}${attr("width", image.img.w)}${attr("height", image.img.h)}>`;
} else {
$$payload.out += "<!--[!-->";
It tests that image is a string and then try to access image.img.src
Reproduction
https://github.com/mquandalle/enhanced-img-svgpng
git clone git@github.com:mquandalle/enhanced-img-svgpng.git
npm run dev
Logs
System Info
System:
OS: macOS 15.0
CPU: (8) arm64 Apple M2
Memory: 93.03 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
bun: 1.2.8 - ~/.bun/bin/bun
Browsers:
Chrome: 135.0.7049.114
Safari: 18.0
npmPackages:
@sveltejs/adapter-auto: ^4.0.0 => 4.0.0
@sveltejs/enhanced-img: ^0.4.4 => 0.4.4
@sveltejs/kit: ^2.16.0 => 2.20.7
@sveltejs/vite-plugin-svelte: ^5.0.0 => 5.0.3
svelte: ^5.0.0 => 5.28.2
vite: ^6.2.5 => 6.3.3
Severity
annoyance
Additional Information
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with packages/enhanced-img/src/preprocessor.js at the linked lines and reproduce the failure using the enhanced-img-svgpng repository with npm run dev. Trace how the dynamically imported SVG value is handled inside the {#each} block, then verify that enhanced:img renders those values without the undefined-property exception.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 52/100