React Native - How to load local image using the uri in Image Component?

Question

I know we can load the local image with:

But i need to load the

Answer 1

In case you are using Expo to build your React Native application, this might help:

1) Install expo-asset: expo install expo-asset

2) Initialize and set your imageUri:

import {Asset} from 'expo-asset';

const imageURI = Asset.fromModule(require('../../assets/test.png')).uri;

3) In my case, I needed it on a Thumbnail from NativeBase:

<Thumbnail square source={{uri: imageURI}}/>

Docs: https://docs.expo.io/versions/latest/sdk/asset/

Answer 2

Add android:requestLegacyExternalStorage="true" in AndroidManifest file.

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:requestLegacyExternalStorage="true" <=== here
  android:theme="@style/AppTheme">

Answer 3

These are the three ways to render images in react-native , In your case you can encode the image

• you can require image

  source={require('/react-native/img/favicon.png')}

• you can get image from web

  source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}

• or you can encode the image

  source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}

as doc suggested as below

export default class DisplayAnImage extends Component {
  render() {
    return (
      <View>
        <Image
          source={require('/react-native/img/favicon.png')}
        />
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
        />
        <Image
          style={{width: 66, height: 58}}
          source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
        />
      </View>
    );
  }
}

or you can create a json file that contains the encoded string of the image image.json

{imageString: '64encodedString'}

them import the file

import image from 'image.json';

then image

<Image source:{{uri:image.imageString}} />