如何在屏幕上显示从相机拍摄的图像答案

【问题标题】：How to display the image on screen which is taken from camera如何在屏幕上显示从相机拍摄的图像
【发布时间】：2021-04-10 08:11:47
【问题描述】：

我正在使用react-native-image-picker 拍照。

下面是代码：

const chooseImage = () => {
    ImagePicker.launchCamera(
      {
        mediaType: 'photo',
        includeBase64: false,
        maxHeight: 1000,
        maxWidth: 1000,
        quality: 0.5,
        cameraType: 'front',
      },
      (response) => {
        console.log(response);
        if (response.didCancel) {
          console.log('User cancelled image picker');
        } else if (response.error) {
          console.log('ImagePicker Error: ', response.error);
        } else if (response.customButton) {
          console.log('User tapped custom button: ', response.customButton);
        } else {
          console.log(response);
        }
      },
    );
  };

<TouchableOpacity onPress={chooseImage}>
    <Text style={styles.title}>Selfie Screen</Text>
</TouchableOpacity>

在控制台中我得到的输出是：

{height: 1000, uri: "content://com.tericsofttask.imagepickerprovider/ca…lib_temp_12aafb95-496e-4796-a6d8-8f29eaa3b78f.jpg", width: 750, fileName: "rn_image_picker_lib_temp_12aafb95-496e-4796-a6d8-8f29eaa3b78f.jpg", type: "image/jpeg", …}
fileName: "rn_image_picker_lib_temp_12aafb95-496e-4796-a6d8-8f29eaa3b78f.jpg"
fileSize: 11569
height: 1000
type: "image/jpeg"
uri: "content://com.tericsofttask.imagepickerprovider/cacheDir/rn_image_picker_lib_temp_12aafb95-496e-4796-a6d8-8f29eaa3b78f.jpg"
width: 750
__proto__: Object

现在我想在屏幕上显示拍摄的图像。但我无法弄清楚。我不想打开画廊，然后选择图像。我想立即在屏幕上显示图像。请帮忙

编辑我做了一些改变：

const chooseImage = () => {
    ImagePicker.launchCamera(
        {
            // ....Same as previous
        },
        (response) => {
            // ... Same as previous
            } else {
                let source = response.uri;
                setImageSource(source);
                console.log("imgSrc: ", imageSource);
            }
        },
    );
};

控制台输出：

imgSrc:  content://com.tericsofttask.imagepickerprovider/cacheDir/rn_image_picker_lib_temp_c61dd0cc-2a46-4987-af5d-2b21ac87548b.jpg

然后我尝试在我的屏幕上显示：

<View style={styles.container}>
    <TouchableOpacity onPress={chooseImage}>
        <Text style={styles.title}>Selfie Screen</Text>
    </TouchableOpacity>
    <Image
        source={{ uri: imageSource }}
        style={styles.imageBox}
        resizeMode='contain'
    />
</View>

但屏幕上什么也没有。

【问题讨论】：

标签： react-native react-native-android react-native-ios react-native-image-picker

【解决方案1】：

在分析响应对象时，我注意到一个名为“URI”（统一资源标识符）的字段。这基本上代表了image 的路径。

使用此路径并将其作为源传递给Image 以显示图像。

 <Image source={{ uri: PATH_SHOULD_BE_HERE }} />

参考文献

【讨论】：

我的帖子中有一个编辑。你能看看吗？

【解决方案2】：

这可能是一个基本错误，但您应该检查styles.imageBox 样式，一旦数据图像的宽度和高度是强制性的并且您没有在示例中包含它。

请注意，对于网络和数据图像，您需要手动指定图像的尺寸！

【讨论】：