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 'svelte-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 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',
	tint: '100:blue:green:red',
	blur: 1000

Learn More about getCldImageUrl

MIT 2023 ©