Flyimg

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

export const imageConfig = {
  provider: 'flyimg',
  providers: {
    flyimg: flyimgProvider({
      "baseURL": "https://flyimg.example.com",
      "sourceURL": "https://www.example.com",
      "processType": "upload"
    })
  }
} satisfies ImageConfig;

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

Image source

Use an absolute image source, or a relative path with sourceURL configured.

/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,
  "format": "webp",
  "fit": "cover"
}}
/>

Provider options

baseURL

Your Flyimg server origin.

sourceURL

Public source origin used to make relative source paths absolute.

processType

Processing route, defaults to upload.

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, crop, gravity, rotate, strip, mozjpeg, preserveAspectRatio and preserveNaturalSize. Fit cover enables crop; fill disables aspect-ratio preservation.

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

• Fit outside is unsupported and ignored. Contain and inside use Flyimg default resizing.
• The server must be able to fetch the source URL. Configure allowed sources on Flyimg.
• When reverse proxying with nginx, preserve embedded https:// in the request path by setting merge_slashes off.
• Set strip, mozjpeg, preserveAspectRatio or preserveNaturalSize to false to opt out of their enabled defaults.