Getting Started with getCldImageUrl

Basic Usage

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

const url = getCldImageUrl({
  width: 600,
  height: 600,
  src: '<Public ID>'
});

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

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',
  gravity: 'faces',
  removeBackground: true,
  tint: '100:blue:green:red',
  underlays: [{
    publicId: '<Public ID>',
    width: 600,
    height: 600,
    crop: 'fill'
  }]
});

Learn More about getCldImageUrl

Configuration
Examples

Last updated on April 23, 2023

Examples Configuration