Next Cloudinary v6 now available! View Changelog

<CldImage />
Basic Usage

Getting Started with CldImage

The CldImage component provides an easy way to deliver images from Cloudinary with the same experience you'd expect inside of a Next.js app.

With it comes access to more advanced features like dynamic cropping, background removal, overlays, and other Cloudinary transformations.

As CldImage is a wrapper around the Next.js Image component, you also gain access to all built-in Image component features will work out-of-the-box like Responsive Sizing.

Basic Usage

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

Turtle in the ocean
import { CldImage } from 'next-cloudinary';
 
<CldImage
  width="960"
  height="600"
  src="<Public ID>"
  sizes="100vw"
  alt="Description of my image"
/>

The src property takes in a Cloudinary Public ID which includes the folder path along with the ID of the image itself. The width and the height should represent the rendered size and the alt value should be a text-based description of the image.

The sizes prop is optional, but recommended for Responsive Sizing.

Using the App Router in Next.js 13+? Add the "use client" directive at the top of your file.

Transformations

You can further take advantage of Cloudinary features like background removal and overlays by adding additional props:

Turtle in the ocean
import { CldImage } from 'next-cloudinary';
 
<CldImage
  width="500"
  height="500"
  src="<Public ID>"
  crop="fill"
  removeBackground
  tint="70:blue:purple"
  underlay="<Public ID>"
  sizes="100vw"
  alt="Description of my image"
/>

Using Cloudinary URLs

CldImage supports passing a fully qualified Cloudinary URL as the src, however, it must include a version number (/v1234) in order to be correctly parsed.

The version number is required due to the variable nature of Cloudinary URLs. This helps to ensure the integretiy when during the parsing process.

import { CldImage } from 'next-cloudinary';
 
<CldImage
  width="500"
  height="500"
  src="https://res.cloudinary.com/mycloud/image/upload/v1234/myimage"
  alt="Description of my image"
/>

Preserving URL Transformations

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:

import { CldImage } from 'next-cloudinary';
 
<CldImage
  src="https://res.cloudinary.com/<Cloud Name>/image/upload/w_100,h_200,c_fill/v1234/myimage"
  width="<Width>"
  height="<Height>"
  preserveTransformations
  alt="<Description>"
/>

For example:

test
import { CldImage } from 'astro-cloudinary';
 
<CldImage
  src="https://res.cloudinary.com/<Cloud Name>/image/upload/e_background_removal/b_blueviolet/f_auto/q_auto/v1/cld-sample-5"
  width="<Width>"
  height="<Height>"
  preserveTransformations
  alt="test"
/>

Would generate a URL of:

https://res.cloudinary.com/<Cloud Name>/image/upload/e_background_removal/b_blueviolet/f_auto/q_auto/c_limit,w_1600/v1/cld-sample-5?_a=BBGAABS00

Watch & Learn

View on YouTube

Learn More about CldImage