Enact

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 •
StringObject

String value or Object of values used to determine which image will appear on a specific screenSize.

alt
String

String value for the alt attribute of the image.

aria-label
String

Sets the aria-label for the image. If unset, it defaults to the value of alt

children
Node

Node for the children of an Image. Useful for overlays.

onError
Function

Function that will run if the image has an error.

onLoad
Function

Function that will run 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.

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'
ArrayBooleanFunctionModuleNumberObjectString