Uploadcare

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 { uploadcareProvider } from '@desource/image/providers/uploadcare';

export const imageConfig = {
  provider: 'uploadcare',
  providers: {
    uploadcare: uploadcareProvider({
      "cdnURL": "https://ucarecdn.com"
    })
  }
} satisfies ImageConfig;

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

Image source

Pass an Uploadcare UUID or an absolute CDN file URL.

c160afba-8b42-45a9-a46a-d393248b0072

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="c160afba-8b42-45a9-a46a-d393248b0072"
  alt="Sample image" width={800} height={500}
  modifiers={{
  "fit": "cover",
  "format": "webp",
  "quality": "smart"
}}
/>

Provider options

cdnURL

CDN origin, including https://. Defaults to https://ucarecdn.com; set your custom delivery domain if needed.

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

Width and height become resize. Fit cover uses scale_crop centered on the image, contain disables stretching, and other fit values use smart_resize. Supports format, quality, progressive, strip_meta, crop, border_radius, setfill and zoom_objects.

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

• Uploadcare quality uses named presets such as smart, smart_retina, normal, better, best, lighter and lightest. Pass those through modifiers rather than a numeric quality prop.
• Transformation values with multiple path segments can be supplied as arrays. Output URLs retain a trailing slash.