enact logoEnact
Edit on GitHub

moonstone/Image

Provides Moonstone styled Image component that supports multiple resolution sources.

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

Members

ImageComponent

A Moonstone-styled image component

<Image
  src={{
    'hd': 'https://dummyimage.com/64/e048e0/0011ff',
    'fhd': 'https://dummyimage.com/128/e048e0/0011ff',
    'uhd': 'https://dummyimage.com/256/e048e0/0011ff'
  }}
>
import Image from '@enact/moonstone/Image';

ImageBaseComponent

A Moonstone-styled image component without any behavior

import {ImageBase} from '@enact/moonstone/Image';
Properties
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 for Image

ImageDecoratorHigher-Order Component

Moonstone-specific behaviors to apply to Image.

import {ImageDecorator} from '@enact/moonstone/Image';
ArrayBooleanFunctionModuleNumberObjectString