Image

Display images.

This component renders images with flexbox layout and cover object-fit (rather than stretch) by default. It includes support for native lazy loading and pixel-density-specific sources. When an image fails to load it will display a gray placeholder background color rather than display a broken image icon and fallback text.

import { Image } from 'react-gui/image';

<Image {...props} />;

API #

Props #

accessibilityControls ?string

Equivalent to aria-controls.

accessibilityDescribedBy ?string

Equivalent to aria-describedby.

accessibilityDetails ?string

Equivalent to aria-details.

accessibilityHasPopup ?string

Equivalent to aria-haspopup.

accessibilityLabel ?string

Equivalent to aria-label.

accessibilityLabelledBy ?string

Equivalent to aria-labelledby.

accessibilityOwns ?string

Equivalent to aria-owns.

accessibilityPressed ?boolean

Equivalent to aria-pressed.

accessibilityRole ?boolean

Equivalent to role.

accessibilityRoleDescription ?string

Equivalent to aria-roledescription.

accessibilitySelected ?boolean

Equivalent to aria-selected.

alternativeText ?string

Equivalent to HTMLImageElement.alt. Note that some browsers will provide ML-generated descriptions of unlabelled images.

crossOrigin ?("anonymous" | "use-credentials")

Equivalent to HTMLImageElement.crossOrigin.

dataSet ?Object

Equivalent to HTMLElement.dataset.

decoding ?("async" | "auto" | "sync")

Equivalent to HTMLImageElement.decoding.

focusable ?boolean

Set whether the view can receive keyboard focus.

loading ?("eager" | "lazy")

Equivalent to HTMLImageElement.loading.

nativeID ?string

Set the native id attribute.

onError ?() => void

Called when the image fails to load.

onLoad ?() => void

Called when the image successfully loads.

source ?(string | Array<{ uri, scale }>)

The sources to display at different pixel densities. A single source can be passed as a string.

style ?Style

Set the styles of the view.

testID ?string

Set the test selector label (via data-testid).

Style #


Details #

import Image from 'react-gui/image';
import StyleSheet from 'react-gui/style-sheet';

<Image
alternativeText=""
crossOrigin="use-credentials"
decoding="async"
loading="lazy"
onLoad={() => {}}
source={[
{ uri: 'https://...' },
{ uri: 'https://...', scale: 2 }
]}

style={styles.image}
/>


const styles = StyleSheet.create({
image: {
filter: 'drop-shadow(0px 1px 1px pink)',
imageRendering: 'high-quality',
objectFit: 'fill',
objectPosition: 'top left',
}
});
Updated
Edit
React GUICopyright © Facebook Inc.