ui/Image

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

Import Usage

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

Members

Image   Component

A minimally styled Image ready for customization by a theme.

Import Usage

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

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.

Import Usage

import {ImageBase} from '@enact/ui/Image';

Properties

alt

String

String value for the alt attribute of the image.

---

backgroundColor

String

A color to render behind the image. Accepts any valid CSS background-color value (named color, hex, rgb(), etc.). Gradients are not supported here; they are CSS images, not colors; use backgroundSrc for an image background instead.

---

backgroundSrc

StringObject

A second image to render behind the main src image.

This is useful when src points to an image with transparent areas — this image will show through those transparent regions, layered above backgroundColor and placeholder but below src. Accepts the same string or screen-size-keyed object format as src.

---

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.

Import Usage

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

Includes: ui/ForwardRefui/ForwardRef.ForwardRef