Unable to render image from local path on IOS in ReactNative

Question

I am working on a react native application. I am testing it on IOS simulator. I upload images in the application and images get stored on some local path, but when i come back to screen i am unable to show the image, the images space is there but there is no image.

Path where image get stored is:

file:///Users/ssi/Library/Developer/CoreSimulator/Devices/0746958E-03AA-4A38-A208-2CD36B1A484E/data/Containers/Data/Application/628731CA-19CD-497C-8C01-CBC2BA5403B0/Library/Caches/C528D3FF-7153-4D16-9E82-8762AF317780.jpg

Code to show the image is:

render() {
  if (this.state.imageData) {
    return (
      <View>
        <View style={styles.view}>
          {
            (this.state.imageData == '' || this.state.imageData == null || this.state.imageData == undefined)
              ?
              null
              :
              this.state.imageData.map(img => {
                var tst = img;
                console.log(img.image.image);

                return (

                  <TouchableHighlight key={this.uuidv4()} onPress={() => {
                    this.setState({ zoom: img.image.image });
                    this.setState({ completeImageObject: img.image });
                  }}>
                    <Image const style={styles.imagePreview} source={{ uri: img.image.image }} />
                  </TouchableHighlight>
                );
              })
          }
        </View>
        {this.state.zoom ? <Card><PinchZoomView scalable={false}><FitImage resizeMode="contain" source={{ uri: this.state.zoom }} /></PinchZoomView>
          <TouchableOpacity style={styles.btn} onPress={() => this.deleteImage(this.state.zoom, this.state.completeImageObject)}>
            <Text style={{ color: 'white' }}>
              Delete Image
            </Text>
          </TouchableOpacity>
        </Card> : <View style={styles.container}><Text>Bild zum vergrößern antippen.</Text></View>}
      </View>

    );
  } else {
    return (<Text style={styles.noIMG}>Keine Bilder vorhanden</Text>)
  }
}

Code for uploading image is:

ImagePicker.showImagePicker(options, (responseIMG) => {

                        if(responseIMG.uri){
                          ImageResizer.createResizedImage(responseIMG.uri, responseIMG.width, responseIMG.height, "JPEG", 10, 0).then((response) => {


                          var answs = this.state.answers ? this.state.answers : [];
                              var dt = new Date();
                              date = (dt.getDate() > 9 ? dt.getDate() : "0" + dt.getDate())
                              + "." + (dt.getMonth() > 9 ? dt.getMonth() : "0" + (dt.getMonth()+1))
                              + "." + dt.getFullYear();

                          var questionIdFromNavigation = this.props.navigation.state.params.q_id;
                          var imageToBeSavedInDb = {a_id: null, content: null, image: response.uri, date: date, p_id: this.state.project.p_id, quest_id: this.props.navigation.state.params.questionnaireId, q_id: questionIdFromNavigation, neu: 1, type:"2", user: em, deleted: 0, local_p_id: this.props.navigation.state.params.project.local_p_id} ;
                              answs.push({
                                  a_id: null,
                                  content: null,
                                  image: response.uri,
                                  date: date,
                                  p_id: this.state.project.p_id,
                                  quest_id: this.props.navigation.state.params.questionnaireId,
                                  q_id: questionIdFromNavigation,
                                  neu: 1,
                                  type:"2",
                                  user: em,
                                  deleted: false,
                                  local_p_id: this.props.navigation.state.params.project.local_p_id});
                                  this.setState({answers: answs});
                                  //saveAns(this.props.navigation.state.params.project, this.state.answers);
                                  db.insertImage(imageToBeSavedInDb, this.props.navigation.state.params.project.local_p_id);
                                  this.setState({loading: false});

                                  var imgs = this.state.images;
                                  if(imgs !== null && imgs !== undefined && imgs !== ''){
                                  imgs.push({image: imageToBeSavedInDb});
                                  this.setState({images: imgs});
                                  }else{
                                    this.setState({images: [{image: imageToBeSavedInDb}]});
                                  }


                  }).catch((err) => {
                     alert(err)
                    });
                        }else{
                          if (responseIMG.didCancel) {

                          }
                          else if (responseIMG.error) {

                          }
                          else {
                          }
                }
                });

I do get the above mentioned file path in "img.image.image". There is space for image but there is no image. I also find one more thing that path after the "Application" folder does not exist on my system. Why is that? If path does not exist, how image is stored at that path?

Answer 1

You should not save the absolute path as it is changing on every build. This issue could be simply solved by replacing the path before "/Documents/..." with a tilde "~".

let pathToFile = "file:///var/mobile/Containers/Data/Application/9793A9C3-C666-4A0E-B630-C94F02E32BE4/Documents/images/72706B9A-12DF-4196-A3BE-6F17C61CAD06.jpg"
if (Platform.OS === 'ios') {
    pathToFile = '~' + pathToFile.substring(pathToFile.indexOf('/Documents'));
}

This is supported by React Native as you can see in their source code.