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

I am developing an application in which i need to upload an image from phone camera and also from gallery . camera & gallery is not showing image inside image tag.

here is my code

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);    
            }
        });
    }

and this is image view code

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

CodePudding user response：

Try this,It will help you

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 will give you assets array you can access image uri as response.assets[0].uri.