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

Question

我正在开发一个应用程序，我需要从手机摄像头和图库中上传图像。相机和图库未在图像标签内显示图像。

这是我的代码

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 访问。