image
image copied to clipboard
How to do chained transformations in ImageKit? global modifiers in config prevent raw transformation working correctly.
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.