Getting Started with CldImage
Basic Usage
The basic required props include width, height, src, and alt:
<CldImage
width="600"
height="600"
src="<Public ID>"
alt="Description of my image"
/>If using the Next.js 13 app directory, you must add the use client; directive at the top of your file.
The src property takes in a Cloudinary Public ID which includes the folder path along with the ID of the image itself.
Tip: You can alternatively pass in a full Cloudinary URL as the src, however, it must include a version number (ex: /v1234/).
You can further take advantage of Cloudinary features like background removal and overlays by adding additional props:
<CldImage
width="600"
height="600"
src="<Public ID>"
crop="thumb"
gravity="faces"
removeBackground
tint="100:blue:green:red"
underlays={[{
publicId: '<Public ID>',
width: 600,
height: 600,
crop: 'fill'
}]}
alt="Description of my image"
/>If using a full Cloudinary URL, you might already have transformations applied to your image.
To preserve those transformations, you can apply the preserveTransformations property:
<CldImage
width="600"
height="600"
src="<Cloudinary URL>"
preserveTransformations
alt="Description of my image"
/>As CldImage is a wrapper around the Next.js Image component, all built-in Image component features will work out-of-the-box.