Image

Use the Image component to display an image in your product. This renders the <img> HTML element and extends the Box component.

Usage Example

Live Editor

<Image alt="Algorand" borderRadius={8} height="auto" src="https://www.algorand.com/assets/media-kit/logos/full/png/algorand_full_logo_black.png" />

<Image
  alt="Algorand"
  borderRadius={8}
  height="auto"
  src="https://www.algorand.com/assets/media-kit/logos/full/png/algorand_full_logo_black.png"
/>

Result

Loading...

Props

Prop	Type	Default	Description
alt	string (optional)		Sets alt attribute on image for accessibility.
height	string (optional)	'auto'
maxWidth	string (optional)	'100%'
src	string (required)		Sets the src attribute of the img element.
theme	object (optional)		Sets theme.

Image uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled System props.