Sanity

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

export const imageConfig = {
  provider: 'sanity',
  providers: {
    sanity: sanityProvider({
      "projectId": "your-project",
      "dataset": "production",
      "baseURL": "https://cdn.sanity.io/images"
    })
  }
} satisfies ImageConfig;

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

Image source

Pass an image asset _ref such as image-hash-1200x800-jpg, or an absolute Sanity image URL.

image-assetid-1200x800-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="image-assetid-1200x800-jpg"
  alt="Sample image" width={800} height={500}
  modifiers={{
  "quality": 80,
  "fit": "cover",
  "hotspot": {
    "x": 0.5,
    "y": 0.4
  }
}}
/>

Provider options

projectId

Project ID, required for image references. Can be extracted from an absolute Sanity URL.

dataset

Dataset name. Defaults to production when it cannot be inferred.

baseURL

The CDN image root, before project and dataset.

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

Supports width, height, quality, format, fit, background, crop and hotspot. Crop objects become a pixel rect using dimensions in the asset ID; hotspot objects set fp-x and fp-y.

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

• Format defaults to auto=format. Use crop and hotspot directly from Sanity image fields.
• Fit cover maps to crop; contain maps to fill with a white background unless overridden. Inside maps to min and outside to max.