Image
This package contains React Native Web's <Image />
and <ImageBackground />
. They share the same props, however, you should NOT put children inside of `.
Installation
yarn add @escher/image
Then include the styles in your application. Make sure to autoprefix as these components (and RNW) relies on flexbox.
import '@escher/image/style.css';
If you are targeting IE 11, AND you want to take advantage of the inline
prop (which is ideal for placing an <Image>
within an inline element), you should include the style.css
file to be safe. Be sure that your build system has vendor prefixing as these styles rely on flexbox support.
Props
source: string | ImageSourceURI
The image source URI. This can be a string or an object with uri
, height
, and width
specified.
<Image source="https://google.com/favicon.ico" />
<Image
source={{
uri: 'https://google.com/favicon.ico',
}}
/>
<Image
source={{
uri: 'https://google.com/favicon.ico',
height: 10,
width: 20,
}}
/>
defaultSource?: string | ImageSourceURI = ''
The default image source. This is used if the source
fails to load.
Default: ''
<Image defaultSource="https://google.com/favicon.ico" />
<Image
defaultSource={{
uri: 'https://google.com/favicon.ico',
height: 10,
width: 20,
}}
/>
resizeMode?: ImageResizeMode = 'cover'
Image resize mode. Allowed values include:
// this is exported for your convenience
export type ImageResizeMode =
| 'none'
| 'cover'
| 'contain'
| 'stretch'
| 'repeat'
| 'center';
accessibilityLabel: string
This is the equivalent of alt text for your image.
Required.
onLayout?: (e: { nativeEvent: Event }) => void;
Callback for when the image has finished layout. Will only fire if resizeMode
is set to center
, repeat
,
onLoad?: (e: { nativeEvent: Event }) => void;
Callback for when the image has completed loading.
onLoadStart?: (e: { nativeEvent: Event }) => void;
Callback for when the image has started loading.
onLoadEnd?: (e: { nativeEvent: Event }) => void;
Callback for when the image has finished loading.
onError?: (e: { nativeEvent: Event }) => void;
Callback for when and if the image has errored when attempting to load.
Style Overrides
<Image style>
and <Image className />
will be applied to the outer <div>
. This is usually what you want to do. However, you can also override styles with your own css with these selectors:
[data-escher-image-root] {
/* this is the outer div */
}
[data-escher-image-image] {
/* this is inner div with the background-image */
}