Question

我正在研究React本机应用程序。我正在IOS模拟器上对其进行测试。我在应用程序中上传图像，并且图像存储在某些本地路径中，但是当我返回屏幕时，我无法显示图像，图像空间在那里但没有图像。

存储图像的路径是：

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

显示图像的代码为：

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

用于上传图片的代码为：

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 {
                          }
                }
                });

我确实在“ img.image.image”中获得了上述文件路径。有图像空间，但是没有图像。我还发现我的系统上“ Application”文件夹之后的路径不存在。这是为什么？如果路径不存在，如何在该路径上存储图像？

Answer 1

您不应保存绝对路径，因为它在每个构建中都会更改。可以通过将波浪号“〜”替换为“ / Documents / ...”之前的路径来解决此问题。

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'));
}

React Native支持此功能，正如您在其source code中所见。

无法在ReactNative中从IOS上的本地路径渲染图像

1 个答案: