Skip to content

<CldImage />

The CldImage component is the main way of displaying a Cloudinary image in your Svelte app.

Basic Usage

The required props are width, height, src, and alt:

Turtle
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage src="images/turtle" alt="Turtle" width={960} height={600} />

Transformations

You can use Cloudinary transformations with simple props which are fully typed:

Blue Turtle
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
width={960}
height={600}
src="images/turtle"
alt="Blue Turtle"
tint="70:blue:purple" />

Using Cloudinary URLs

We support passing a Cloudinary URL as the src as long as it contains a version number (/v1234).

<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage
width={960}
height={600}
src="https://res.cloudinary.com/svelte-cloudinary/image/upload/v1/images/turtle"
alt="Turtle" />

Preserve Transformations

If you’re using the full Cloudinary URL as your src it might contain transformations. To preserve these transformations you can set the preserveTransformations prop.