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, });