image

image copied to clipboard

When using the imagekit provider in Nuxt 3 version of this module, the transformation query string is prepended with a ? parameter to the transformation like so: ?tr=w-200,h-200. According to an imagekit blog post it seems that you must use & instead of ? like so: &tr=w-200,h-200 . Thus, an example working URL is: https://ik.imagekit.io/ikmedia/o/product-clothes-3.jpg?alt=media&token=df8b1026-8c70-459d-87b3-1caa9f1d6d44&tr=w-300,h-400

Unfortunately, when using the Nuxt Image module with Imagekit, the proper & parameter is not prepended to the transformation URL. For example, I have the module configured like so:

nuxt.config.ts:

    image: {
        imagekit: {
          baseURL: 'https://ik.imagekit.io/XXX/'
        },
       domains: ['firebasestorage.googleapis.com'],
       screens: {
        xs: 0,
        sm: 576,
        md: 768,
        lg: 992,
        xl: 1200,
        xxl: 1400
       },

Post.vue:

              <NuxtImg
                provider="imagekit"
                :src="post.pathURL" // "users%2FIdAUJMiswJajH8bnxdLrFpMhfTt1%2Fposts%2Fasdfdf_TIUI?alt=media&token=2598350b-3f09-41a4-8154-3d2df81435f2"
                width="48"
                height="48"
              />

The above code causes the image to be like so: https://ik.imagekit.io/XXX/users%2FIdAUJMiswJajH8bnxdLrFpMhfTt1%2Fposts%2Fasdfdf_TIUI?alt=media&token=2598350b-3f09-41a4-8154-3d2df81435f2?tr=w-200,h-200 and although it works, it is not properly resized to 200x200. If you replace the ? with the & in the URL transformation, it will be properly resized to 200x200.

Does anyone know how to fix this problem?

For anyone wondering, I reached out to the imagekit devs and they are working on a fix.