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?
