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