next-cloudinary CldImage problem

Options
Wardo
Wardo Member Posts: 1
edited May 13 in Developer APIs

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!

Answers

  • Cloudinary Team
    Cloudinary Team Administrator, Cloudinary Staff Posts: 129 admin
    Options

    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