MENU


<Image>

This displays an image.

Props(inherits View Props)accessibleaccessibilityLabelblurRadiusdefaultSourceloadingIndicatorSourceresizeModesourcestyletestID Platform-Specific PropscapInsets iOSfadeDuration AndroidprogressiveRenderingEnabled AndroidresizeMethod Android
Methods.abortPrefetch() Android.getSize().getSizeWithHeaders().prefetch().queryCache().resolveAssetSource() Event PropsonErroronLayoutonLoadonLoadEndonLoadStartonPartialLoad iOSonProgress

'resizeMethod' can be ' auto' auto' auto' , 'resize', or 'scale'.

'resizeMode' can be 'cover' 'cover' 'cover' , 'contain', 'stretch', 'repeat', or 'center'.

'ImageCacheEnum' can be 'default' 'default' 'default' , 'reload', 'force-cache', 'only-if-cached'.


RESETRUNFULL
import React from 'react';import { View, Image, StyleSheet } from 'react-native';const styles = StyleSheet.create({
  container: { paddingTop: 50,},
  tinyLogo: { width: 50, height: 50,},
  logo: { width: 66, height: 58,},});const DisplayAnImage = () => {
  return (
    <View style={styles.container}>
      <Image style={styles.tinyLogo}
                  source={require('@expo/snack-static/react-native-logo.png')}
  />
      <Image style={styles.tinyLogo}
                  source={{uri: 'https://reactnative.dev/img/tiny_logo.png',}}
  />
      <Image style={styles.logo} source={{
  uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
        }} />
    </View>
  );}export default DisplayAnImage;