Function: Image()

Image(props): Element

The Image component is a UI element used to display an image with optional fluid resizing and error handling. It supports features such as fallback to a default image on error and custom event handlers for load and error events. It's props extend from Material UI's Box (opens in a new tab) component props, so every prop is interchangeable between those two.

Parameters

Parameter	Type	Description
`props`	`ImageProps`	Image component props

Returns

Element

See

MUI Box Component (opens in a new tab)
Storybook - Image (opens in a new tab)

Example

<Image
  src="https://example.com/nonexistent.jpg"
  alt="Example image"
  imgFluid={true}
  defaultImage="https://example.com/default.jpg"
  onLoad={(event) => console.log('Image loaded', event)}
  onError={(event) => console.log('Image failed to load', event)}
/>

Defined in

packages/react-material-ui/src/components/Image/Image.tsx:46 (opens in a new tab)

HeaderAccount Link