Image

On this page

Example
Props
Accessibility

Image

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

Import component

import { Image } from 'rimble-ui';

Example


<Image
  alt="random unsplash image"
  borderRadius={8}
  height="auto"
  src="https://source.unsplash.com/random/1280x720"
/><Image
  alt="random unsplash image"
  borderRadius={8}
  height="auto"
  src="https://source.unsplash.com/random/1280x720"
/>

Props

alt

string

(optional)

Sets alt attribute on image for accessibility

as

(optional)

Default value:

'img'

height

(optional)

Default value:

'auto'

maxWidth

(optional)

Default value:

'100%'

src

string

(required)

Sets the src attribute of the img element

theme

object

(optional)

Styled System Props

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

Accessibility

Always include an alt prop so that screen readers can describe the image to those with visual impairments

(ﾉ◕ヮ◕)ﾉ*:・ﾟ✧

Contribute to Rimble

We welcome pull requests and issues that help improve Rimble!

Contribute