ImagePicker 不显示所选图像答案

【问题标题】：ImagePicker not showing selected imageImagePicker 不显示所选图像
【发布时间】：2021-07-07 22:45:13
【问题描述】：

我正在使用 react-native-image-picker 库中的 launchImageLibrary 函数。我可以从我的库中选择图像，但所选图像未显示在我的应用程序中，但它显示 uri 在控制台中已更改。这是我的一段代码。

chooseImage = () => {
    let options = {
      maxWidth: 300,
      maxHeight: 300,
      storageOptions: {
        skipBackup: true,
        path: 'images',
        cameraRoll: true,
      },
    };

    launchImageLibrary(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);
      } else {
        this.setState({
          fileUri: response.assets[0].uri,
        });
        console.log(this.state.fileUri);
      }
    });

  

  <TouchableOpacity
    activeOpacity={0.8}
    onPress={this.chooseImage}
    style={{
      width: 300,
      height: 300,
      backgroundColor: COLORS.dark,
      alignItems: 'center',
      justifyContent: 'center',
    }}>
    {this.state.fileUri ? (
      <Image source={{ uri: this.state.fileUri }} />
    ) : (
      <Icon name="add-a-photo" size={40} color={COLORS.inactive} />
    )}
  </TouchableOpacity>

【问题讨论】：

标签： reactjs react-native react-native-image-picker

【解决方案1】：

您必须为图像提供 width 和 height 样式。

chooseImage = (type) => {

    let options = {
        mediaType: type,
    };

    launchImageLibrary(options, (response) => {

        if (response.didCancel) {
            alert('User cancelled camera picker');
        } else if (response.errorCode == 'camera_unavailable') {
            alert('Camera not available on device');
        } else if (response.errorCode == 'permission') {
            alert('Permission not satisfied');
        } else if (response.errorCode == 'others') {
            alert(response.errorMessage);
        }else{
            console.log('uri -> ', response.uri);

            this.setState({
                imageUri: response.uri,
            })
        }

    });
};


render() {

    return (
        <View style={styles.container}>

            <TouchableOpacity onPress={() => this.chooseImage('photo')}>
                <Icon  name="images-outline" size={25}  />
                <Text >Library </Text>
            </TouchableOpacity>
            
            <View style={{marginTop: 50}}>
                {this.state.imageUri ? (
                    <Image source={{ uri: this.state.imageUri }} style={{width: 80, height: 80}} />
                    ) : (
                    <Icon name="add-circle-outline" size={40} />
                )}
            </View>
        
      </View>
    );
}

对于 v4 的 react-native-image-picker

launchImageLibrary(options, (response) => {

    if (response.didCancel) {
        alert('User cancelled camera picker');
    } else if (response.errorCode == 'camera_unavailable') {
        alert('Camera not available on device');
    } else if (response.errorCode == 'permission') {
        alert('Permission not satisfied');
    } else if (response.errorCode == 'others') {
        alert(response.errorMessage);
    }else{

        response.assets.map((asset) => {

            console.log('uri -> ', asset.uri);

            this.setState({
                imageUri: asset.uri,
            })

        });
    }

});

【讨论】：