Getting Started with getCldImageUrl

You can use the getCldImageUrl helper function to generate Cloudinary URLs without the component wrapper. CldImage and other image-based components use getCldImageUrl or a derivitive of it to generate their images, meaning you can expect the same API from CldImage.

Basic Usage

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

import { getCldImageUrl } from 'next-cloudinary';
 
const url = getCldImageUrl({
  width: 960,
  height: 600,
  src: '<Public ID>'
});

getCldImageUrl uses the same API as CldImage. They're both wrappers around @cloudinary-util/url-loader (opens in a new tab) which provide a simpler way to generate images and Cloudinary URLs.

Transformations

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

const url = getCldImageUrl({
  width: 600,
  height: 600,
  src: '<Public ID>',
  crop: 'thumb',
  tint: '100:blue:green:red',
  blur: 1000,
});

Learn More about getCldImageUrl

Examples Configuration