10

Unable to use local temp file path for Image.source iOS.

    <Image 
      style={styles.containerRightCakeImageTag}
      source={{ 
        isStatic: true,
        uri: "file:///Users/md_007/Library/Developer/CoreSimulator/Devices/B450EF4D-7A43-4F2E-AE39-7D92427EBC7E/data/Containers/Data/Application/C2204990-8808-43C0-9678-F6A9CBA74998/Documents/6b66bfab94acc2d89d4c533a1d7ba767.jpeg" 
      }}
    />
Asif vora
  • 3,163
  • 3
  • 15
  • 31

4 Answers4

16

You can use react-native-fs to get directories (which works for ios and android)

var RNFS = require('react-native-fs');

Image element looks like:

<Image source={{uri: 'file://' + RNFS.DocumentDirectoryPath + '/directory/my.png'}} />
Prabhu
  • 1,057
  • 7
  • 13
5

When you read local files or images (for example images cached with react-native-cached-image) you have to add the "file://" only for Android platform and not for the iOS platform.

Here is some code in one of my apps:

let path = Platform.OS === "android" ? ('file://' + imageLocalUrl) : imageLocalUrl;

However, you'd better to use "react-native-fs" to read the file path and not use the simulator path as is in your code.

Paolo Dell'Aguzzo
  • 1,431
  • 11
  • 14
0

The image file must exist in the same folder as the .js file requiring it.

<Image source={require('./Logo.png')} />

or

The image file in your project folder and requiring it.

import Logo from '..' // set image path 

<Image source={require(Logo)} />
Prabhu
  • 1,057
  • 7
  • 13
  • 1
    "file:///Users/md_007/Library/Developer/CoreSimulator/Devices/B450EF4D-7A43-4F2E-AE39-7D92427EBC7E/data/Containers/Data/Application/C2204990-8808-43C0-9678-F6A9CBA74998/Documents/6b66bfab94acc2d89d4c533a1d7ba767.jpeg" its a full path of image its store into the app local data. its perfect work in Android and view the image but issue in iOS only. – Asif vora Jun 08 '18 at 09:27
  • @Asif vora Can you explain how you handled image in ios? I'm facing same issue. – Kosalram Ramakrishnan Apr 07 '20 at 06:40
  • @KosalramRamaKrishnan look into https://stackoverflow.com/a/50757738/7833077 hope this is helpfull – Asif vora Sep 18 '20 at 05:54
-2

Use isStatic and uri in source match your need

const localUri = "file:///Users/md_007/Library/Developer/CoreSimulator/Devices/B450EF4D-7A43-4F2E-AE39-7D92427EBC7E/data/Containers/Data/Application/C2204990-8808-43C0-9678-F6A9CBA74998/Documents/6b66bfab94acc2d89d4c533a1d7ba767.jpeg" ;
<Image source={{ isStatic: true, uri: localUri }} />
zap
  • 191
  • 3
  • 8