sveltejs / sveltejs/kit

Allow passing imagetools parameters when dynamically importing images for enhanced:img

Open
#12,608 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

documentation pkg:enhanced-img types / typescript
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the problem

Technically it is a bug, because it should work, but seeing the source code it was not implemented at all.

I'm looking for a way to set the quality of all images by default, and then crop and tint a dynamically some imported image. Obviously, this issue is geared toward having imagetools work for dynamic import first :).

To add to @flippbit list of things that doesn't work:
(https://github.com/sveltejs/kit/issues/11535#issuecomment-1941956125)

import MyImage from './path/to/your/image.jpg?enhanced&quality=80&tint=#ffaa22';

Throw an error:

Cannot find module './path/to/your/image.jpg?enhanced&quality=80' or its corresponding type declarations.ts(2307)

Sidenote:
Nuxt Img can have a global configuration to set default quality, etc: https://image.nuxt.com/get-started/configuration

*EDIT Thanks to a discord mod:
It should be implemented and is a type error:
https://github.com/JonasKruckenberg/imagetools/issues/160#issuecomment-965021959

sveltejs/enhanced-img type:
https://github.com/sveltejs/kit/blob/6056ba30e29ac5747c356fbf1a42dd71f2c4aa1f/packages/enhanced-img/types/ambient.d.ts

Describe the proposed solution

Implement

import MyImage from './path/to/your/image.jpg?enhanced&quality=80&tint=#ffaa22';
Alternatives considered

Make enhanced:img accept a variable as src for loops.

Importance

i cannot use SvelteKit without it

Additional Information

Not having this is kind of a nightmare IMO when trying to optimize images as much as possible and when using components for almost everything (Hero banner, Section's background, Image loop, galleries, etc all must use dynamic import of the images if using enhanced:img.

I didn't find a way yet on how to use it with user uploaded content since it change the image at build time.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with packages/enhanced-img/types/ambient.d.ts, the type declaration identified in the issue, and inspect how enhanced:img handles dynamic imports and query parameters. Confirm the change with a dynamic import using ?enhanced&quality=80&tint=#ffaa22, ensuring the parameters are accepted without the reported module or type error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.