Image

Description

The Image component is a versatile image loader that supports lazy loading, custom loaders, and different placeholder options. It ensures efficient loading and display of images with various configurations.

Props

Prop	Type	Description
src	string	The source URL of the image.
onError	() => void	Callback function to handle errors when loading the image.
className	string	Additional class names for styling the image.
alt	string	Alternative text for the image.
style	React.CSSProperties	Inline styles for the image.
blurPlaceholder	boolean	Whether to use a blurred placeholder before the image loads. Can be used when the placeholder is a type of string (Image url)
height	number	Height of the image.
width	number	Width of the image.
lazy	native | custom | boolean	Whether to use lazy loading for the image.
imgSizes	ImageSize[]	Array of image size objects for different screen sizes.
onLoad	() => void	Callback function when the image successfully loads.
fit	contain | cover | fill | scale-down	Determines how image should be rezised to fit its container.
placeholder	React.ReactNode | string	Custom placeholder to display while the image loads. supports custom component
errorPlaceholder	React.ReactNode | string	Placeholder to display if the image fails to load. supports custom component
quality	number	Quality of the image.
defaultPlaceholder	boolean	Whether to use the default placeholder. Default value is true Renders an animated skeleton placeholder if there is no placeholder provided
loader	(loader: CustomSrcLoader) => string	Custom loader function to generate the image URL.

Usage

The Image component is a versatile image loader that supports lazy loading, custom loaders, and different placeholder options. It ensures efficient loading and display of images with various configurations.

Render image

import Image from 'shop/client/components/atoms/image/Image';

const MyComponent = () => {
    return <Image src="/image.jpg" alt="Example image" width={800} height={600} quality={80} />;
};

export default MyComponent;

Render image with srcSet

import Image from 'shop/client/components/atoms/image/Image';

const MyComponent = () => {
    return (
        <Image
            src="/image.jpg"
            alt="Example image"
            width={800}
            height={600}
            quality={80}
            imgSizes={[
                { minScreenWidth: 1201, width: 500, quality: 100 },
                { maxScreenWidth: 600, src: '/image-small.jpg' },
                { minScreenWidth: 601, maxScreenWidth: 1200, src: '/image-medium.jpg' }
            ]}
        />
    );
};

export default MyComponent;

Render image with custom loader, onLoad & onError functions

import Image from 'shop/client/components/atoms/image/Image';

const MyComponent = () => {
    return (
        <Image
            src="/image.jpg"
            alt="Example image"
            width={800}
            height={600}
            quality={80}
            imgSizes={[
                { minScreenWidth: 1201, width: 500, quality: 100 },
                { maxScreenWidth: 600, src: '/image-small.jpg' },
                { minScreenWidth: 601, maxScreenWidth: 1200, src: '/image-medium.jpg' }
            ]}
            loader={({ src, width, quality }) => `<url>/${src}?w=${width}&q=${quality}`}
            onLoad={() => console.log('Image loaded')}
            onError={() => console.log('Image failed to load')}
        />
    );
};

export default MyComponent;

Placeholder

Using default loading and error placeholder

If no placeholder is provided and defaultPlaceholder is set to true (default) a skeleton is rendered for loading. If no error placeholder is provided it will render a container with a cross.

import Image from 'shop/client/components/atoms/image/Image';

const MyComponent = () => {
    return <Image src="/image.jpg" alt="Example image" />;
};

export default MyComponent;

Using Custom loading placeholder

import Image from 'shop/client/components/atoms/image/Image';

const MyComponent = () => {
    return <Image src="/image.jpg" alt="Example image" placeholder={<div>Loading ...</div>} />;
};

export default MyComponent;

Using Custom error placeholder

import Image from 'shop/client/components/atoms/image/Image';

const MyComponent = () => {
    return <Image src="/image.jpg" alt="Example image" errorPlaceholder={<div>An error accured.</div>} />;
};

export default MyComponent;

Lazy Loading

Defines if image should be lazy loaded. If nothing provided, it uses per default the value native. Default lazyloading option can be maintained in the environment file.

import Image from 'shop/client/components/atoms/image/Image';

const MyComponent = () => {
    return <Image src="/image.jpg" alt="Example image" width={800} height={600} quality={80} lazy={true} />;
};

export default MyComponent;

---

---

Interfaces

ImageSize

interface ImageSize {
    maxScreenWidth?: number;
    minScreenWidth?: number;
    src?: string;
    width?: number;
    quality?: number;
}

Property	Type	Description
maxScreenWidth	number	Maximum screen width for the media query.
minScreenWidth	number	Minimum screen width for the media query.
src	string	Source URL for the image.
width	number	Width of the image.
quality	number	Quality of the image.

SourceMedia

interface SourceMedia {
    source: string;
    media: string;
}

Property	Type	Description
source	string	Source URL for the image.
media	string	Media query string.

CustomSrcLoader

interface CustomSrcLoader {
    src: string;
    width?: number;
    quality?: number;
}

Property	Type	Description
src	string	Source URL for the image.
width	number	width of the image.
quality	number	Quality of the image.

SrcLoader

interface SrcLoader {
    imgSizes?: ImageSize[];
    lazyLoad?: boolean;
    loader?: (loader: CustomSrcLoader) => string;
    src: string;
    width?: number;
    quality?: number;
    imageUrl?: string;
}

Property	Type	Description
imgSizes	ImageSize[]	An optional array of image size objects.
lazyLoad	boolean	An optional flag for lazy loading images.
loader	(loader: CustomSrcLoader) => string	An optional custom loader function.
src	string	Source URL for the image.
width	number	Width of the image.
quality	number	Quality of the image.
imageUrl	string	An optional URL for the image.