Skip to main content

VendureImage

VendureImage​

@vendure/dashboardvendure-image.tsx
v3.4.0

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"
 />
Signature
function VendureImage(props: VendureImageProps): void

Parameters

props​

parameter
VendureImageProps

VendureImageProps​

@vendure/dashboardvendure-image.tsx
v3.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​

property
AssetLike | null | undefined

The asset to display.

preset​

property
ImagePreset

The preset to use for the image.

mode​

property
ImageMode

The crop/resize mode to use for the image.

width​

property
number

The width of the image.

height​

property
number

The height of the image.

format​

property
ImageFormat

The format of the image.

quality​

property
number

The quality of the image.

useFocalPoint​

property
boolean

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

fallback​

property
React.ReactNode

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

ref​

property
React.Ref<HTMLImageElement>

The ref to the image element.

AssetLike​

@vendure/dashboardvendure-image.tsx
v3.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​

property
string

preview​

property
string

name​

property
string | null

focalPoint​

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

ImagePreset​

@vendure/dashboardvendure-image.tsx
v3.4.0

The presets that can be used for the VendureImage component.

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

ImageFormat​

@vendure/dashboardvendure-image.tsx
v3.4.0

The formats that can be used for the VendureImage component.

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

ImageMode​

@vendure/dashboardvendure-image.tsx
v3.4.0

The modes that can be used for the VendureImage component.

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