Seamlessly integrate optimized responsive images in your Svelte applications using ImageEngine Svelte components.
The package includes four components:
ImageEngineProvider
Image
Picture
Source
To start using these components, place ImageEngineProvider
above them in the DOM tree with the deliveryAddress
prop set:
<script>
import { ImageEngineProvider } from "@imageengine/svelte";
</script>
<ImageEngineProvider deliveryAddress="https://blazing-fast-pics.cdn.imgeng.in">
<YourComponent />
</ImageEngineProvider>
<script>
import { Image } from "@imageengine/svelte";
</script>
<section>
<Image
src="pick-ups/custom/unstoppable.jpg"
srcSet={...}
sizes={...}
directives={...}
{...otherProps}
/>
</section>
deliveryAddress
: ImageEngine Delivery Address.- Type:
string
- Type:
stripFromSrc
: Optionally strip a portion of the source string in all ImageEngine components.- Type:
string?
- Type:
src
: Relative path to the image.- Type:
string
- Type:
directives
: ImageEngine directives for optimization.- Type:
object?
- Properties:
width
: Define desired width.autoWidthWithFallback
: Set width to auto (with fallback).height
: Define desired height.compression
: Adjust compression.outputFormat
: Define desired output format.fitMethod
: Define desired fit method.noOptimization
: Don't apply any optimizations to the origin image.sharpness
: Adjust sharpness.rotate
: Define rotation.scaleToScreenWidth
: Use WURFL to calculate screen's width and then scale the image accordingly.crop
: Crop the image [width, height, left, top].inline
: Convert the image into a data url.keepMeta
: Keep EXIF data.force_download
: Force download of the image.max_device_pixel_ratio
: Maximum device pixel ratio.
- Type:
srcSet
: List of image variations for the image source set.- Type:
array?
- Properties:
src
: Relative path to the image.width
: Width descriptor.directives
: Custom optimization instructions.
- Type:
This component wraps image components to provide a responsive container.
srcSet
: List of image variations for the image source set.- Type:
array
- Properties:
src
: Relative path to the image.width
: Width descriptor.directives
: Custom optimization instructions.
- Type: