enact logoEnact
Edit on GitHub

ui/Image

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

import Image from '@enact/ui/Image';

Members

ImageComponent

A minimally styled Image ready for customization by a theme.

import Image from '@enact/ui/Image';
Properties
aria-label
String

The aria-label for the image.

If unset, it defaults to the value of alt.

ImageBaseComponent

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.

import {ImageBase} from '@enact/ui/Image';
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/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.

ImageDecoratorHigher-Order Component

A higher-order component that adds behaviors to an ImageBase.

import {ImageDecorator} from '@enact/ui/Image';
ArrayBooleanFunctionModuleNumberObjectString