Skip to content Skip to sidebar Skip to footer
Home / Android / Image / Ios / React Native / Reactjs

React Native - How To Load Local Image Using The Uri In Image Component?

Post a Comment
I know we can load the local image with: But i need to load the image like this:

Solution 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:

<Thumbnailsquaresource={{uri:imageURI}}/>

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

Solution 2:

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

exportdefaultclassDisplayAnImageextendsComponent {
  render() {
    return (
      <View><Imagesource={require('/react-native/img/favicon.png')}
        /><Imagestyle={{width:50, height:50}}
          source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
        /><Imagestyle={{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}} />

Solution 3:

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">

You may like these posts

Post a Comment for "React Native - How To Load Local Image Using The Uri In Image Component?"