javascript - React native Unable to use local tmp file path for Image.source iOS - Stack Overflow

admin管理员组

文章数量:1193775

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

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

• javascript
• ios
• reactjs
• react-native

Share Improve this question Follow edited Dec 10, 2018 at 10:32 Asif vora asked Jun 8, 2018 at 7:44 Asif voraAsif vora 3,35933 gold badges1717 silver badges3535 bronze badges 3

• Do you see any error? – Tushar Arora Commented Jun 8, 2018 at 8:17
• How to use image get or Upload ? – Vishal Vaghasiya Commented Jun 8, 2018 at 8:42
• its image is uploaded in local app data and its URI work in android perfect but issue in iOS only. – Asif vora Commented Jun 8, 2018 at 9:28

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 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'}} /> 

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.

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)} />

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 }} />

本文标签： javascriptReact native Unable to use local tmp file path for Imagesource iOSStack Overflow