从反应本机图像选择器中选择图像后不显示图像

Question

我正在开发一个应用程序，我需要从 phone 相机和画廊上传图像。相机和图库未显示图片标签内的图片。

这是我的代码

function profile({ route,navigation }) {
    const [imageUri, setimageUri] = useState('');



    const openCamera = () => {
        let options={
            storageOptions: {
                path: 'images',
                mediaType: 'photo',
            },
        };
        launchCamera(options, response => {
            console.log("response =", response);
            if(response.didCancel){
                console.log('user cancelled image picker');
            }else if(response.error){
                console.log('Image picker Error:', response.error);
            }else if(response.customButton){
                console.log('User taped cutom button:', response.customButton);
            }else{
                const source = {uri: 'data: image/jpeg;base64,'+ response.base64 };
                setimageUri(source);    
            }
        });
    }

这是图像查看代码

<Image
  source={imageUri}
  style={{
    height: 100,
    width: 100,
    borderRadius: 100,
    borderWidth: 2,
    borderColor: 'black',
    alignSelf: 'center',
  }}
/>

Answer 1

试试这个，它会帮助你

function profile({ route,navigation }) {
    const [imageUri, setimageUri] = useState('');

    const openCamera = () => {
        let options={
            storageOptions: {
                path: 'images',
                mediaType: 'photo',
            },
        };
        launchCamera(options, response => {
            console.log("response =", response);
            if(response.didCancel){
                console.log('user cancelled image picker');
            }else if(response.error){
                console.log('Image picker Error:', response.error);
            }else if(response.customButton){
                console.log('User taped cutom button:', response.customButton);
            }else{
                setimageUri(response.assets[0].uri);    
            }
        });
    }


<Image
  source={{ uri: imageUri }}
  style={{
    height: 100,
    width: 100,
    borderRadius: 100,
    borderWidth: 2,
    borderColor: 'black',
    alignSelf: 'center',
  }}
/>

response 会给你 assets 数组你可以访问图像 uri 作为 response.assets[0].uri.

从反应本机图像选择器中选择图像后不显示图像

Image is not shown after image is selected from react-native image-picker

react-native

react-native-image-picker