javascript - React-Native: Download Image from Firebase Storage - Stack Overflow

admin管理员组

文章数量:1244296

Pre-Informations:

I still have a Firebase project opened and I am successfully still using the Firebase Database (So the firebase.initializeApp(config) works). I uploaded several Images at my Firebase Storage in the folder "/Images/" and named them image1.jpg, image2.jpg,..

React-Native: 0.31.0, Firebase: 3.3.0

What I want:

I want to get the Image from the Firebase Storage and put them into an <Image>

What I actually did:

var storageRef = firebase.storage().ref('Images/image1.jpg');

//1. Try:
storageRef.getDownloadURL().then(function(url) {
  console.log(url);
)}

//2. Try:
var sampleImage = storageRef.getDownloadURL().then(function(url) {
  console.log(url);
)}

//3. Try:
var sampleImage = storageRef.getDownloadURL();

Informations about the code:

1. The code doesn't reach the console.log(url) point

   2.1. Tried to use the sampleImage as source in a <Image> object: empty Image

   2.2. Tried to log the sampleImage: undefined

   2.3. Tried to logthe url: didnt reach this point

   3.1. Tried to use the sampleImage as source in a <Image> object: empty Image

   3.2. Tried to log the sampleImage: { F: 0, ka: undefined, o: { F: 0, ... } }

All tries returned the same error code after 2-3 minutes.

Firebase Storage: Max retry time for operation exceeded, please try again.

Thank you very much in advance for you help.

Pre-Informations:

I still have a Firebase project opened and I am successfully still using the Firebase Database (So the firebase.initializeApp(config) works). I uploaded several Images at my Firebase Storage in the folder "/Images/" and named them image1.jpg, image2.jpg,..

React-Native: 0.31.0, Firebase: 3.3.0

What I want:

I want to get the Image from the Firebase Storage and put them into an <Image>

What I actually did:

var storageRef = firebase.storage().ref('Images/image1.jpg');

//1. Try:
storageRef.getDownloadURL().then(function(url) {
  console.log(url);
)}

//2. Try:
var sampleImage = storageRef.getDownloadURL().then(function(url) {
  console.log(url);
)}

//3. Try:
var sampleImage = storageRef.getDownloadURL();

Informations about the code:

1. The code doesn't reach the console.log(url) point

   2.1. Tried to use the sampleImage as source in a <Image> object: empty Image

   2.2. Tried to log the sampleImage: undefined

   2.3. Tried to logthe url: didnt reach this point

   3.1. Tried to use the sampleImage as source in a <Image> object: empty Image

   3.2. Tried to log the sampleImage: { F: 0, ka: undefined, o: { F: 0, ... } }

All tries returned the same error code after 2-3 minutes.

Firebase Storage: Max retry time for operation exceeded, please try again.

Thank you very much in advance for you help.

• javascript
• image
• firebase
• react-native
• firebase-storage

Share Improve this question Follow edited Dec 17, 2016 at 13:46 Ivan Chernykh 42.2k1313 gold badges136136 silver badges148148 bronze badges asked Sep 8, 2016 at 7:41 Jonathan StellwagJonathan Stellwag 4,26744 gold badges2828 silver badges5555 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Your first one seems right based on the docs. I believe you're getting an error so wire up an error callback as well:

storageRef.getDownloadURL().then(function(url) {
    console.log(url);
}, function(error){
    console.log(error);
});

See: https://firebase.google./docs/reference/js/firebase.storage.Reference#getDownloadURL

Update

I reported this issue to Firebase support and I got the following response:

Our engineers got back and it seems that this is an Android-specific issue (works on iOS) [..] We are currently working on this, but as to the timeline, we could not share anything as of the moment

Research

It appears that this is an actual bug caused by react-native's XMLHttpRequest acting up. When trying the getDownloadURL() in the same way you describe the same thing happens (ie. Max Retry time reached).

However when overriding react-native's polyfill of XMLHttpRequest as described in this stack overflow thread getDownloadURL() will finish normally and return a valid URL.

We are using react-native v0.33.0, Firebase v3.4.1

Workaround

We have been using this workaround in the meantime; bypassing the Firebase API:

var bucket = firebase.storage().ref().bucket;
var firebaseUrl = "https://firebasestorage.googleapis./v0/b/" + bucket + "/o/";
var finalUrl = firebaseUrl + 'path%2Fto%2Fresource';
firebase.auth().currentUser.getToken()
.then((token) => {
  fetch(finalUrl, {headers: {'Authorization' : 'Firebase ' + token}})
  .then((response) => response.json())
  .then((responseJson) => {
    var downloadURL = finalUrl + "?alt=media&token=" + responseJson.downloadTokens})
  })
}); 

This is an issue that seems to affect a small amount of users since I have only seen the problem raised otherwise here. However this appears to be an actual bug and it is very debilitating when it occurs, so any more input would be greatly appreciated.

TO get All the Images From the storage

firebase.storage().ref().child('filename').list().then(result => {
    // Loop over each item
    result.items.forEach(pics => {
        firebase.storage().ref().child(pics.fullPath).getDownloadURL().then((url) => {
            console.log(url);
            //these url will be used to display images
         })
     });
})

本文标签： javascriptReactNative Download Image from Firebase StorageStack Overflow