next-cloudinary CldImage problem

Wardo

I am able to present my Cloudinary images via public URL with the React <img> tag.

Using the same URL with <CldImage> I get

TypeError: Failed to construct 'URL': Invalid URL

I'm new to Cloudinary but proficient with Nextjs and React. I must be missing something basic, but can't figure out what.

Help would be greatly appreciated. Thanks!

Cloudinary Team

Hi Wardo,

Thanks for contacting Cloudinary. A typical cldimage in react would be as shown below:

const CldImage = ({ publicId }) => {
const myImage = cld
.image(publicId)
.resize(thumbnail().width(300).height(300).gravity(autoGravity()))
.delivery(format('auto'))
.delivery(quality('auto'));
return (

);
};
export default CldImage;

Can you please send along the code you are facing errors ?

I hope this helps. Please let me know if you have further questions. Looking forward to your response.

Thanks,
Sree

Helpful Links For You
💬 Share questions, connect with other users in our Cloudinary Community forums and Discord server!
🧑‍🎓 Join our Cloudinary Academy for free courses, workshops and other educational resources.
📄 Read our documentation for in-depth details on Cloudinary product features and capabilities
📰 Check out the Cloudinary blog for the latest company news and insights

edarttisan

Hey, I'm having the same issue but I'm using Nextjs. Here's my code:

"import { CldImage } from "next-cloudinary"; // (npm package )

" {Array.isArray(resources) && resources.map(({ public_id, width, height, secure_url }) => { 

return ( <CldImage key={`${public_id}`} width="300"  height="300" src={`${public_id}`} sizes="100vw" alt={`Image ${public_id}`} /> ); })}"

This is the error I'm getting: "TypeError: Failed to construct 'URL': Invalid URL".

Also, could you explain your response a little bit more. In your code response, where's cld coming from? from the "next-cloudinary" npm package?

SreeCloudinary

Hi @edarttisan ,

Thanks for your response.

I tried the following in my NextJS app and it works fine:

<CldImage key={'sample'} width="300" height="300" src={'sample'} sizes="100vw" alt={`Image sample`} />

sample is the public ID in my Cloudinary account:

https://res.cloudinary.com/sreecloudinary/image/upload/v1695755119/sample.jpg

Please check what is the value that is being sent as in the public_id field?

Also, cld is part of the JavaScript Core Library as shown here: https://cloudinary.com/blog/how_to_serve_videos_in_next_js_applications_with_cloudinary#method_2_with_the_javascript_sdk_of_the_cloudinary_video_player_and_the_code_cloudinary_core_code_library

Please let me know if you have further questions.

Best Regards,
Sree

edarttisan

Hey @SreeCloudinary

Thanks for the reply, when I make a request using "const { resources } = await cloudinary.api.resources();", this is the shape of the responds I get back:
"{
asset_id: '56dd78154366ca444e3c63110b6eb801',
public_id: 'samples/cup-on-a-table',
format: 'jpg',
version: 1719096060,
resource_type: 'image',
type: 'upload',
created_at: '2024-06-22T22:41:00Z',
bytes: 134300,
width: 2246,
height: 1500,
asset_folder: '',
display_name: 'cup-on-a-table',
url: 'http://res.cloudinary.com/dipjv6pts/image/upload/v1719096060/samples/cup-on-a-table.jpg',
secure_url: 'https://res.cloudinary.com/dipjv6pts/image/upload/v1719096060/samples/cup-on-a-table.jpg'
}"

but based on your responds, it looks like public ID should be a url?

Zachary

Hey there,

Public Id in Sree's example is 'sample'.

The public Id in your response is 'samples/cup-on-a-table' which includes the folder structure. This is also reflected in the delivery URL:
http://res.cloudinary.com/dipjv6pts/image/upload/v1719096060/samples/cup-on-a-table.jpg

edarttisan

Hey,

Yes correct, but passing the 'public_id' into "<CldImage key={`${public_id}`} width="300"  height="300" src={`${public_id}`} sizes="100vw" alt={`Image ${public_id}`} />" is giving me: TypeError: Failed to construct 'URL': Invalid URL. I tried passing the url and secure_url, got the same error. Maybe I'm missing something, either with env variables or reinstalling the package, I'm just not sure

SreeCloudinary

@edarttisan ,

Thanks for checking. I tried the same using your cloud and I am able to get the image accordingly:

Here is the code: <CldImage key={'samples/cup-on-a-table'} width="300" height="300" src={'samples/cup-on-a-table'} sizes="100vw" alt={`Image check`} />

Image that returned according to the above is returned as attached.

Screenshot 2024-06-26 at 4.47.35 PM.png

I have a simple Next.js application(created from https://nextjs.org/learn-pages-router/basics/create-nextjs-app/setup ) which has the .env file with the following:

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Cloud_Name>". I added the following in the index.js file:

<CldImage key={'samples/cup-on-a-table'} width="300" height="300" src={'samples/cup-on-a-table'} sizes="100vw" alt={`Image check`} />

Best Regards,
Sree

edarttisan

@SreeCloudinary

Thanks a lot for the response and I'll look into my code again. I'm probably missing something.

SreeCloudinary

@edarttisan , All the best and looking forward to your response.

Thanks,

Sree

edarttisan

@SreeCloudinary So I figured out what the issue was, I just realized I left:

'NEXT_PUBLIC_CLOUDINARY_SECURE_DISTRIBUTION="<Your Secure Distribution / CNAME>"

NEXT_PUBLIC_CLOUDINARY_PRIVATE_CDN="<true|false>"'

in the .env without specifying any values for them and that's why it kept failing 🤦 Removing them or providing values fixed the issue.

SreeCloudinary

@edarttisan ,

Glad you were about to figure out :)

Appreciate you providing us the solution which could potentially help others in the future.

Best Regards,

Sree