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 #
Equivalent to HTMLImageElement.alt. Note that some browsers will provide ML-generated descriptions of unlabelled images.
Set whether the view can receive keyboard focus.
Set the native id
attribute.
Called when the image fails to load.
Called when the image successfully loads.
The sources to display at different pixel densities. A single source can be passed as a string
.
Set the styles of the view.
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',
}
});