• Components
  • CldImage
  • Basic Usage

Getting Started with CldImage

Basic Usage

The basic required props include width, height, and src:

<CldImage
  width="600"
  height="600"
  src="<Public ID>"
/>

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'
  }]}
/>

As CldImage is a wrapper around the Next.js Image component, all built-in Image component features will work out-of-the-box including the layout prop.

Watch & Learn

View on YouTube

Learn More about CldImage

Last updated on December 1, 2022