Skip to main content

Image

Image is a component for displaying images with support for various resize modes and layout options.

Usage​

<Image 
  src="https://example.com/image.jpg"
  width={200}
  height={200}
  resizeMode="cover"
  borderRadius="md"
/>

With Aspect Ratio​

<Image 
  src="https://example.com/image.jpg"
  width="100%"
  aspectRatio={16/9}
  resizeMode="contain"
/>

Props​

Image accepts styled-system props from the following categories:

  • Border Props
    • border, borderRadius, etc.
  • Space Props
    • margin, padding and their variants

Specific Props​

src​

Type: string Required: true

The source URL of the image.

resizeMode​

Type: 'cover' | 'contain' | 'stretch' | 'center' Default: 'cover'

Determines how the image should be resized:

  • cover: Scale to fill, may crop
  • contain: Scale to fit, may have gaps
  • stretch: Stretch to fill
  • center: Center without resizing

width​

Type: string | number

Width of the image.

height​

Type: string | number

Height of the image.

minWidth​

Type: string | number

Minimum width of the image.

minHeight​

Type: string | number

Minimum height of the image.

aspectRatio​

Type: number

Aspect ratio to maintain for the image.