VendureImage

VendureImage

A component for displaying an image from a Vendure asset.

Supports the following features:

• Presets
• Cropping
• Resizing
• Formatting
• Quality
• Focal point
• Fallback

Example

 <VendureImage
     asset={asset}
     preset="thumb"
     className="w-full h-full object-contain"
 />

function VendureImage(props: VendureImageProps): void

Parameters

props

<MemberInfo kind="parameter" type={<a href='/reference/dashboard/components/vendure-image#vendureimageprops'>VendureImageProps</a>} />

VendureImageProps

The props for the VendureImage component.

interface VendureImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
    asset: AssetLike | null | undefined;
    preset?: ImagePreset;
    mode?: ImageMode;
    width?: number;
    height?: number;
    format?: ImageFormat;
    quality?: number;
    useFocalPoint?: boolean;
    fallback?: React.ReactNode;
    ref?: React.Ref<HTMLImageElement>;
}

• Extends: React.ImgHTMLAttributes<HTMLImageElement>

asset

<MemberInfo kind="property" type={<a href='/reference/dashboard/components/vendure-image#assetlike'>AssetLike</a> | null | undefined} />

The asset to display.

preset

<MemberInfo kind="property" type={<a href='/reference/dashboard/components/vendure-image#imagepreset'>ImagePreset</a>} />

The preset to use for the image.

mode

<MemberInfo kind="property" type={<a href='/reference/dashboard/components/vendure-image#imagemode'>ImageMode</a>} />

The crop/resize mode to use for the image.

width

<MemberInfo kind="property" type={number} />

The width of the image.

height

<MemberInfo kind="property" type={number} />

The height of the image.

format

<MemberInfo kind="property" type={<a href='/reference/dashboard/components/vendure-image#imageformat'>ImageFormat</a>} />

The format of the image.

quality

<MemberInfo kind="property" type={number} />

The quality of the image.

useFocalPoint

<MemberInfo kind="property" type={boolean} />

Whether to use the asset's focal point in crop mode.

fallback

<MemberInfo kind="property" type={React.ReactNode} />

The fallback to show if no asset is provided. If no fallback is provided, a default placeholder will be shown.

ref

<MemberInfo kind="property" type={React.Ref<HTMLImageElement>} />

The ref to the image element.

The type of object that can be used as an asset in the VendureImage component.

interface AssetLike {
    id: string;
    preview: string;
    name?: string | null;
    focalPoint?: { x: number; y: number } | null;
}

id

<MemberInfo kind="property" type={string} />

preview

<MemberInfo kind="property" type={string} />

name

<MemberInfo kind="property" type={string | null} />

focalPoint

<MemberInfo kind="property" type={{ x: number; y: number } | null} />

The presets that can be used for the VendureImage component.

type ImagePreset = 'tiny' | 'thumb' | 'small' | 'medium' | 'large' | 'full' | null

ImageFormat

The formats that can be used for the VendureImage component.

type ImageFormat = 'jpg' | 'jpeg' | 'png' | 'webp' | 'avif' | null

ImageMode

The modes that can be used for the VendureImage component.

type ImageMode = 'crop' | 'resize' | null