VendureImage

A component for displaying an image from a Vendure asset.

Supports the following features:

Presets
Cropping
Resizing
Formatting
Quality
Focal point
Fallback

Example

Tsx

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

Signature

function VendureImage(props: VendureImageProps): void

Parameters

props

parameterVendureImageProps

@vendure/dashboard Sourcev3.4.0

The props for the VendureImage component.

Signature

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

propertyAssetLike | null | undefined

The asset to display.

preset

propertyImagePreset

The preset to use for the image.

mode

propertyImageMode

The crop/resize mode to use for the image.

width

propertynumber

The width of the image.

height

propertynumber

The height of the image.

format

propertyImageFormat

The format of the image.

quality

propertynumber

The quality of the image.

useFocalPoint

propertyboolean

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

fallback

propertyReact.ReactNode

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

ref

propertyReact.Ref<HTMLImageElement>

The ref to the image element.

@vendure/dashboard Sourcev3.4.0

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

Signature

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

id

propertystring

preview

propertystring

name

propertystring | null

focalPoint

property{ x: number; y: number } | null

@vendure/dashboard Sourcev3.4.0

The presets that can be used for the VendureImage component.

Signature

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

@vendure/dashboard Sourcev3.4.0

The formats that can be used for the VendureImage component.

Signature

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

@vendure/dashboard Sourcev3.4.0

The modes that can be used for the VendureImage component.

Signature

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