nuxt / nuxt/image

How to do chained transformations in ImageKit? global modifiers in config prevent raw transformation working correctly.

Open
#1,402 1 comment 0 reactions 0 assignees View on GitHub

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.