Cloudflare Images

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

export const imageConfig = {
  provider: 'cloudflareimages',
  providers: {
    cloudflareimages: cloudflareImagesProvider({
      "accountHash": "your-account-hash",
      "baseURL": "https://imagedelivery.net/"
    })
  }
} satisfies ImageConfig;

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

Image source

Use an uploaded image ID, not a zone-relative file path.

your-image-id

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="your-image-id"
  alt="Sample image" width={800} height={500}
  modifiers={{
  "fit": "cover"
}}
/>

Provider options

accountHash

Required Cloudflare Images delivery account hash.

baseURL

Delivery root. Change this for a configured custom delivery domain.

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

Pass variant for a named variant. With no modifiers, the provider uses public. Otherwise width, height, quality, fit and related modifiers create a flexible variant.

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

• A named variant takes precedence over all other transformation modifiers.
• Enable flexible variants before using arbitrary transformations. For /cdn-cgi/image on your own zone, choose cloudflare.