How to do chained transformations in ImageKit? global modifiers in config prevent raw transformation working correctly.
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
The relevant part of my nuxt.config.ts:
image: {
densities: [1, 2],
provider: 'imagekit',
// Options see https://v1.image.nuxtjs.org/get-started/
imagekit: {
baseURL: 'https://ik.imagekit.io/aicosmetic',
modifiers: {
dpr: 'auto' //<-- Note this line - it'll be important later
}
}
},
In my component, I'm trying to load a watermarked image like so, using the raw parameters as per the documentation
<nuxt-img
v-if="preview.image"
:src="preview.image"
class="m-auto w-full"
:modifiers="{
raw: "l-image,i-36cc1e3c-cb82-4fa6-8b7b-6b5b39394920@@Ruso1,lfo-bottom_right,w-bw_mul_0.4,l-end"
}"
/>
The Problem - however - is that when I load up the resulting URL, I get an "invalid transformation" error. This is because I need to chain the dpr-auto before or after the raw modifier with the layer overlay
This is the generated, broken link (note the comma after the dpr-auto: view image
https://ik.imagekit.io/aicosmetic/166edd60-1ddc-4911-ac0b-2312c8b2a165/1936-preview-818165818247-2024-07-02_01_07_44.727525-0-final_4up-kGp1G?tr=dpr-auto,l-image,i-36cc1e3c-cb82-4fa6-8b7b-6b5b39394920@@Ruso1,lfo-bottom_right,w-bw_mul_0.4,l-end
When updating the URL manually to chain the layer (with a semicolon) instead of the comma, then we get the right image: view image
https://ik.imagekit.io/aicosmetic/166edd60-1ddc-4911-ac0b-2312c8b2a165/1936-preview-818165818247-2024-07-02_01_07_44.727525-0-final_4up-kGp1G?tr=dpr-auto:l-image,i-36cc1e3c-cb82-4fa6-8b7b-6b5b39394920@@Ruso1,lfo-bottom_right,w-bw_mul_0.4,l-end
So, is this a bug or a lack of a feature where config and raw modifiers don't play nice together.
or is it a PEBKAC situation?
Any help is much appreciated, thank you for all your work.
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 the image configuration in nuxt.config.ts and the component's modifiers object, then trace how the ImageKit provider combines global modifiers with raw parameters. Compare the generated comma-separated URL with the manually corrected semicolon-separated URL. Done means chained transformations work correctly or the limitation and supported usage are documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxtjs, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100