Svelte components for ImageEngine integration - BetaNotTested

Hassle-free way to deliver optimized responsive images in your Svelte applications.

Quick start

The package includes four components:

• ImageEngineProvider
• Image
• Picture
• Source

To start using provided image tags in your application, place ImageEngineProvider somewhere above them in the DOM tree with the deliveryAddress prop set to your ImageEngine Delivery Address:

<script>
 import { ImageEngineProvider } from 'image-engine-svelte';
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<ImageEngineProvider
    deliveryAddress="https://blazing-fast-pics.cdn.imgeng.in"
    // or, for local development:
    // deliveryAddress="http://localhost:9009"
>
    <ShoppingCart />
    ...
</ImageEngineProvider>

<script>
 import { Image } from 'image-engine-svelte';
</script>

<section>
    <Image
        src="pick-ups/custom/unstoppable.jpg"
        srcSet={...}
        sizes={...}
        directives={...}
        {...otherProps}
    />
</section>

Component props reference

ImageEngineProvider

deliveryAddress - ImageEngine Delivery Address:

deliveryAddress: string

stripFromSrc - Strip away a portion of a source string in all ImageEngine's components. Particularly useful if your images are coming from a headless CMS and you need to erase something in received URL path (origin, for example):

stripFromSrc?: string

Image

src - Relative path to the image:

src: string

directives - ImageEngine directives:

directives?: {
  // Define desired width.
  width?: number
  // Set width to auto (with fallback).
  autoWidthWithFallback?: number
  // Define desired height.
  height?: number
  // Adjust compression.
  // Possible range: 0-100.
  compression?: number
  // Define desired output format.
  outputFormat?:
    | "png"
    | "gif"
    | "jpg"
    | "bmp"
    | "webp"
    | "jp2"
    | "svg"
    | "mp4"
    | "jxr"
  // Define desired fit method.
  fitMethod?: "stretch" | "box" | "letterbox" | "cropbox"
  // Don't apply any optimizations to the origin image.
  noOptimization?: true
  // Adjust sharpness.
  // Possible range: 0-100.
  sharpness?: number
  // Define rotation.
  // Possible range: -360 to 360.
  rotate?: number
  // Use WURFL to calculate screen's width and then scale the image accordingly.
  // Possible range: 0-100 (float).
  scaleToScreenWidth?: number
  // Crop the image [width, height, left, top].
  crop?: number[]
  // Convert the image into a data url.
  inline?: true
  // Keep EXIF data.
  keepMeta?: true
}

srcSet - List of image variations for the image source set:

srcSet?: [{
  // Relative path to the image.
  src: string
  // Width descriptor.
  width: string
  // Custom optimization instructions.
  directives?: TDirectives
}]

Source

srcSet - List of image variations for the image source set:

srcSet?: [{
  // Relative path to the image.
  src: string
  // Width descriptor.
  width: string
  directives?: TDirectives
}]