【发布时间】：2019-10-10 12:21:47
【问题描述】：
我正在开发一个反应原生应用程序。我正在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”中获得了上述文件路径。有图像空间，但没有图像。我还发现我的系统上不存在“应用程序”文件夹之后的路径。这是为什么？如果路径不存在，图片如何存储在该路径中？
【问题讨论】：
-
图片是怎么上传的？
-
我在@Eran 问题中也添加了该代码
-
@Yossi 此路径将导致模拟器出现问题。我建议你在真实设备上检查它。顺便说一句，我没有在真实设备上测试它，因为我的项目需求发生了变化，我搬到了 Sqlite。使用 Sqlite 非常简单直接。
-
@Yossi 那时我不确定。因为我的假设是模拟器每次都会有不同的路径，但在智能手机的情况下该路径不会改变。转移到数据库怎么样？您可以轻松地将图像以任何格式保存在数据库中。
标签： react-native react-native-image