Cloudimage

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

export const imageConfig = {
  provider: 'cloudimage',
  providers: {
    cloudimage: cloudimageProvider({
      "token": "your-token",
      "apiVersion": "",
      "baseURL": "https://images.example.com"
    })
  }
} satisfies ImageConfig;

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

Image source

Use a relative source path with baseURL, or an absolute public source URL.

/photo.jpg

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="/photo.jpg"
  alt="Sample image" width={800} height={500}
  modifiers={{
  "quality": 80,
  "fit": "cover"
}}
/>

Provider options

token

Public customer delivery token, required unless cdnURL is supplied.

apiVersion

API path version, empty by default. Use the version required by your token.

baseURL

Public source origin for relative paths. Falls back to the shared configuration baseURL.

cdnURL

Optional complete Cloudimage CDN URL, overriding the token-based URL.

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

Fit maps to func, quality to q and format to force_format. Supports Cloudimage transformation parameters such as crop, face, cropfit, bound and boundmin.

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

• Absolute source URLs bypass baseURL. Relative sources must resolve to an origin that Cloudimage can fetch.
• Missing both token and cdnURL produces a development warning and an unusable placeholder URL.