Cloudinary

Setup

Install the framework package and the core package for the provider import:

npm install @desource/image @desource/image-svelte

Save this as image.config.ts beside your example component. Replace sample domains and identifiers with your own.

import type { ImageConfig } from '@desource/image';
import { cloudinaryProvider } from '@desource/image/providers/cloudinary';

export const imageConfig = {
  provider: 'cloudinary',
  providers: {
    cloudinary: cloudinaryProvider({
      "cloudName": "demo",
      "deliveryType": "upload"
    })
  }
} satisfies ImageConfig;

Registering this provider makes it the default for the configured components. To mix services, register each provider and set provider="cloudinary" on the image that should use this one.

Image source

Pass an uploaded public ID, a Cloudinary upload URL, or an absolute remote URL when using fetch delivery.

sample

Usage

The example uses the shared configuration above and the Svelte image component.

<script lang="ts">
  import { Image, setImageConfig } from '@desource/image-svelte';
  import { imageConfig } from './image.config';

  setImageConfig(imageConfig);
</script>

<Image
  src="sample"
  alt="Sample image" width={800} height={500}
  modifiers={{
  "format": "webp",
  "quality": 80,
  "gravity": "auto"
}}
/>

Provider options

cloudName

Your Cloudinary cloud name. Expands to https://res.cloudinary.com/{cloudName}/image/upload.

deliveryType

Use upload for stored public IDs or fetch for absolute remote source URLs. Defaults to upload.

baseURL

Optional full delivery URL; overrides cloudName and supports auto-upload folders.

Pass shared defaults such as screens, domains, aliases and presets to the image configuration. Pass provider-specific defaults as modifiers in the provider factory.

Modifiers

Format and quality default to auto. Width, height and fit map to w, h and c. Additional modifiers include gravity, rotate, roundCorner, effect, flags, dpr, opacity, overlay, underlay, transformation, zoom, colorSpace and blur.

Set dimensions on the component and pass service-specific operations through modifiers, as shown above. See the provider source for exact mappings and the service documentation for accepted values.

Provider notes

• Configure allowed fetch domains before using deliveryType: fetch. Auto-upload folders require a matching Cloudinary upload mapping.
• Standard fit values map to Cloudinary crop modes. Extra modes include minCover, minInside, coverLimit, thumbnail and cropping.
• Public upload IDs normally have their filename extension removed; format selects the output encoding.