ui/Image

Edit on GitHub

An unstyled image component to be customized by a theme or application.

Members

Image Component

A minimally styled Image ready for customization by a theme.

Extends: ui/Imageui/Image.ImageBase
Wrapped with: ui/Imageui/Image.ImageDecorator

Properties

aria-label

String

The aria-label for the image.

If unset, it defaults to the value of alt.

ImageBase Component

A basic image component designed to display images conditionally based on screen size.

This component does not have a default size, therefore the image will not show unless a size is specified using a CSS className or inline style.

Example:

const src = {
  'hd': 'http://lorempixel.com/64/64/city/1/',
  'fhd': 'http://lorempixel.com/128/128/city/1/',
  'uhd': 'http://lorempixel.com/256/256/city/1/'
};

<Image className={css.myImage} src={src} sizing="fill" />

ui/Image is based on the div element, but it uses img to provide onError and onLoad events. The image that you see on screen is a background-image from the div element, not the img element.

If you need a naturally sized image, you can use the native <img> element instead.

Properties

alt

String

String value for the alt attribute of the image.

children

Node

Node for the children of an Image. Useful for overlays.

componentRef

ObjectFunction

Called with a reference to the root component.

When using ui/Imageui/Image.Image, the ref prop is forwarded to this component as componentRef.

css

Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

image - The root component class
fit - Applied when sizing prop is fit
fill - Applied when sizing prop is fill

onError

Function

Called if the image has an error.

onLoad

Function

Called once the image is loaded.

placeholder

String

A placeholder image to be displayed before the image is loaded.

For performance purposes, it should be pre-loaded or be a data url. If src is unset, this value will be used as the background-image.

Default: ''

sizing

String

Used to set the background-size of an Image.

'fill' - sets background-size: cover
'fit' - sets background-size: contain
'none' - uses the image's natural size

Default: 'fill'

src

StringObject

String value or Object of values used to determine which image will appear on a specific screenSize.

ImageDecorator Higher-Order Component

A higher-order component that adds behaviors to an ui/Imageui/Image.ImageBase.

Includes: ui/ForwardRefui/ForwardRef.ForwardRef