ui/ Image
An unstyled image component to be customized by a theme or application.
import Image from '@enact/ui/Image';
Members
ImageComponent
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 Image from '@enact/ui/Image';
Properties
String value for the alt attribute of the image.
The aria-label for the image.
If unset, it defaults to the value of
alt
.Node for the children of an
Image
. Useful for overlays.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 classfit
- Applied whensizing
prop isfit
fill
- Applied whensizing
prop isfill
Called if the image has an error.
Called once the image is loaded.
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 thebackground-image
.Default: ''Used to set the
background-size
of anImage
.'fill'
- setsbackground-size: cover
'fit'
- setsbackground-size: contain
'none'
- uses the image's natural size
Default: 'fill'String value or Object of values used to determine which image will appear on a specific screenSize.