Supabase

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

export const imageConfig = {
  provider: 'supabase',
  providers: {
    supabase: supabaseProvider({
      "baseURL": "https://your-project.supabase.co/storage/v1/render/image/public/photos"
    })
  }
} satisfies ImageConfig;

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

Image source

Use the object path within the public bucket configured in baseURL.

/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

baseURL

Required render endpoint, including /storage/v1/render/image/public and your bucket name.

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, height and quality are forwarded. Fit maps to resize with cover, contain or fill. The format modifier can request origin to keep the original encoding.

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

• The adapter throws if baseURL is missing. An object/public download URL is not the transformation endpoint.
• Your Supabase project must have image transformations enabled. Check the service documentation for plan availability and dimension limits.
• This adapter does not authenticate private objects or sign URLs; use public bucket assets for this configuration.