React Native，如何展示云存储的图片

Question

I uploaded images but I can't display those images. I followed the documentation and some examples that I saw, tried but didn't get anything. My code now looks like this

const imageRef = storage().ref('images/').child('photo-229634742.jpeg').getDownloadURL();
return(
   ...
   <Text>
      {imageRef}
   </Text>
);

and in this way, it shows this error

Can someone help me? I want to show the images I made on the cloud storage

This is my code to upload:

    const [avatar, setAvatar] = useState(null)
    const [imagePath, setImagePath] = useState()
    const [isLoading, setIsLoading] = useState()
    const [status, setStatus] = useState()

    function chooseFile() {
    setStatus( '' );
    var options = {
        title: 'Select Image',
        storageOptions: {
            skipBackup: true, // do not backup to iCloud
            path: 'images', // store camera images under Pictures/images for android and 
    Documents/images for iOS
        },
    };
    ImagePicker.showImagePicker(options, response => {
        setAvatar(response.uri)
        if (response.didCancel) {
            console.log('User cancelled image picker', storage());
        } else if (response.error) {
            console.log('ImagePicker Error: ', response.error);
        } else if (response.customButton) {
            console.log('User tapped custom button: ', response.customButton);
        } else {
            let path = getPlatformPath(response).value;
            let fileName = getFileName(response.fileName, path);
            setImagePath( path );
            uploadImageToStorage(path, fileName);
            
        }
    });
};

function getFileName(name, path) {
    if (name != null) { return name; }
    
    if (Platform.OS === "ios") {
        path = "~" + path.substring(path.indexOf("/Documents"));
    }
    return path.split("/").pop();
}

function uploadImageToStorage(path, name) {
    setIsLoading({ isLoading: true });
    let reference = storage().ref("images/" + name);
    let task = reference.putFile(path);
    task.then(() => {
        console.log('Image uploaded to the bucket!');
        setIsLoading(false);
        setStatus('Image uploaded successfully');
    }).catch((e) => {
        status = 'Something went wrong';
        console.log('uploading image error => ', e);
        setIsLoading(false);
        setStatus('Something went wrong');
    });
}

/**
 * Get platform specific value from response
 */
function getPlatformPath({ path, uri }) {
    return Platform.select({
        android: { "value": path },
        ios: { "value": uri }
    })
}

function getPlatformURI(imagePath) {
    let imgSource = imagePath;
    if (isNaN(imagePath)) {
        imgSource = { uri: imagePath };
        if (Platform.OS == 'android') {
            imgSource.uri = "images/" + imgSource.uri;
        }
    }
    return imgSource
}

Answer 1

This answer assumes that your images are actually being uploaded to Cloud Storage.

You cannot render an image from within a Text tag , the imageRef constant you're declaring is a method which returns a download url , you want to store that url in state to be able to call it from within an image tag .

Code would look something like this:

const [url, setUrl] = useState();

let imageRef = firebase.storage().ref('images/photo-229634742.jpeg');
imageRef
.getDownloadURL()
.then((url) => {
  setUrl(url);
})
.catch((e) => console.log('getting downloadURL of image error => ', e));

and then you can call it from an Image tag as in <Image source={{uri:url}}/>

The reason you need to store the url in state is because the getDownloadUrl() method returns a promise rather than a string of text. That promise cannot be used directly as a way to render the image. The promise is unaccessible from outside the imageRef function by itself. You can check this out by removing the state like this:

let imageRef = firebase.storage().ref('images/photo-229634742.jpeg');
imageRef
.getDownloadURL()
.catch((e) => console.log('getting downloadURL of image error => ', e));
console.log(url)

You'll see that it returns undefined . By storing it in state you expand the scope of it and make it accessible from outside the method. In that way you can call it from anywhere in the file you're working in.