Using ImageKit on client side component
Unanswered
Bald Eagle posted this in #help-forum
Bald EagleOP
Hi I am trying to run imageKit to optimize image on NextJS14
However, I am running into trouble when using a component with "use client".
import imagekit from '../globalComponents/imageKitConfig';
const imageURL = imagekit.url({
src: "https://ik.imagekit.io/jsfia/default-image.jpg?updatedAt=1685008465289",
transformation: [{
height: "300",
width: "400"
}]
});
Will give me:
TypeError: url_1.URLSearchParams is not a constructor
I tried using solution:
if (typeof window === 'undefined') {
imageURL = imagekit.url({
src: "https://ik.imagekit.io/jsfia/default-image.jpg?updatedAt=1685008465289",
transformation: [{
height: "300",
width: "400"
}]
});
}
However, i don't get the image I wanted. just blank image. (error)
However, I am running into trouble when using a component with "use client".
import imagekit from '../globalComponents/imageKitConfig';
const imageURL = imagekit.url({
src: "https://ik.imagekit.io/jsfia/default-image.jpg?updatedAt=1685008465289",
transformation: [{
height: "300",
width: "400"
}]
});
Will give me:
TypeError: url_1.URLSearchParams is not a constructor
I tried using solution:
if (typeof window === 'undefined') {
imageURL = imagekit.url({
src: "https://ik.imagekit.io/jsfia/default-image.jpg?updatedAt=1685008465289",
transformation: [{
height: "300",
width: "400"
}]
});
}
However, i don't get the image I wanted. just blank image. (error)
3 Replies
Chinese Chongqing Dog
Hard to debug without seeing the whole code, have you had a look at this article, maybe it helps
https://imagekit.io/blog/nextjs-image-optimization/
https://imagekit.io/blog/nextjs-image-optimization/
@Chinese Chongqing Dog Hard to debug without seeing the whole code, have you had a look at this article, maybe it helps
https://imagekit.io/blog/nextjs-image-optimization/
Bald EagleOP
I read thru this.
but is it possible to use the image without using use client?
but is it possible to use the image without using use client?
Chinese Chongqing Dog
Its definitely possible somehow (haven't used imagekit on my own), but Imagekit also serves as a CDN, which means the Images are stored on Multiple Servers around the world and when someone Clicks on your Website the CDN Server checks where the nearest Server is and then sends the Content ( Images in your case ) to the Client.
On Large scale websites you do this because you want to reduce the bandwidth cost, decrease delivery time of the content ...
So Serving it from your Server (not using 'use client' ), you would need to store the images on your server and then send it to the client, which would counteract on the benefits of a CDN.
On Large scale websites you do this because you want to reduce the bandwidth cost, decrease delivery time of the content ...
So Serving it from your Server (not using 'use client' ), you would need to store the images on your server and then send it to the client, which would counteract on the benefits of a CDN.