Image

an image

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"

"center"

"end"

"stretch"

fallback

Specifies the URL of the fallback image used when src is failing to load

"string"

fill

Whether the width and/or height should fill the container.

"horizontal""vertical"truefalse

fit

How the image fills its container.

"cover""contain"

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"

"small"

"medium"

"large"

"xlarge"

{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

opacity

Transparency of the image.

"weak""medium""strong""string"truefalse

Theme

global.opacity.medium

The value used when opacity is set to true.

0.4

image.extend

Any additional style for the Image.

"any CSS"

(props) => {}