Question

我正在开发一个应用程序，在该应用程序中，我需要从手机上传图像，一旦显示单击“上载图库”，我便可以选择该图像，但是一旦选择了图像，该图像就不会显示在图像容器中用过。

我的代码

这是selectImage函数

selectImage = () => {
        const options = {
            title: 'Select Profile Picture',
            storageOptions: {
                skipBackup: true,
                path: 'images',
            },
        };
        ImagePicker.showImagePicker(options, (response) => {
            console.log('Response = ', response);
            if (response.didCancel) {
                console.log('User cancelled image picker');
            } else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
                Alert.alert(response.error.toString())
            } else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            } else {
                //let source = { uri: response.uri };
                Alert.alert(response.uri)
                let source = { uri: 'data:image/jpeg;base64,' + response.data };
                this.setState({
                    imageSource: source,
                    data: response.data,
                });
            }
        });
    }

这是显示代码

<Image source={this.state.imageSource} style={{ width: 200, height: 250 }} />

没有引发错误。

Answer 1

尝试将图像源直接设置为uri响应提供的ImagePicker。

Alert.alert(response.uri);
let source = { uri: response.uri };
this.setState({
  imageSource: source,
  data: response.data,
});

Answer 2

尝试在设置状态后添加console.log。如果状态为空，则在更新状态时会出错。如果状态中填充了您所选图片的uri，请尝试重建您的应用程序

Answer 3

最后我发现了问题，这是由于react-native-web-swiper引起的，我在其中包含了Image容器，这不支持状态的重新呈现。

从react-native-image-picker中选择图像后，图像不会显示

3 个答案: