moonstone/ Image
Exports the moonstone/Image.Image component.
import Image from '@enact/moonstone/Image';
Members
ImageComponent
moonstone/Image.Image is a component designed to display images
conditionally based on screen size. This component has a default size but should have a size
specified for its particular usage using a CSS className
or inline style
.
Usage:
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'} />
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/moonstone/Image';
Properties
- src •
String value or Object of values used to determine which image will appear on a specific screenSize.
- alt
String value for the alt attribute of the image.
- aria-label
Sets the aria-label for the image. If unset, it defaults to the value of
alt
- children
Node for the children of an Image. Useful for overlays.
- onError
Function that will run if the image has an error.
- onLoad
Function that will run once the image is loaded.
- placeholder
A placeholder image to be displayed before the image is loaded. For performance purposes, it should be pre-loaded or be a data url.
Default: ''- sizing
Used to set the
background-size
of an Image.'fill'
- setsbackground-size: cover
'fit'
- setsbackground-size: contain
'none'
- uses the image's natural size
Default: 'fill'