Skip to main content

getImageProps#

A utility function that returns optimized (responsive) image attributes src, srcSet, etc.

Used internally by the Image component.

Parameters#

getImageProps accepts an image URL (Storyblok asset URL!) and a configuration object parameter, with the following options:

interface GetImagePropsOptions {
/**
* Optimize the image sizes for a fixed size. Use if you know the exact size
* the image will be.
* Format: `[width, height]`.
*/
fixed?: [number, number];
/**
* Optimize the image sizes for a fluid size. Fluid is for images that stretch
* a container of variable size (different size based on screen size).
* Use if you don't know the exact size the image will be.
* Format: `width` or `[width, height]`.
*/
fluid?: number | [number, number];
/**
* Apply the `smart` filter.
* @see https://www.storyblok.com/docs/image-service#facial-detection-and-smart-cropping
*
* @default true
*/
smart?: boolean;
}
const getImageProps: (imageUrl: string, options?: GetImagePropsOptions) => {
src?: undefined;
srcSet?: undefined;
width?: undefined;
height?: undefined;
sizes?: undefined;
}

Usage#

Basic example#

const imageProps = getImageProps(storyblok_image?.filename, {
fluid: 696
});