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
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
String value for the alt attribute of the image.
Node for the children of an
Image
. Useful for overlays.Called with a reference to the root component.
When using ui/Image.Image, the
ref
prop is forwarded to this component ascomponentRef
.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.
ImageDecoratorHigher-Order Component
A higher-order component that adds behaviors to an ImageBase.
import {ImageDecorator} from '@enact/ui/Image';