title: Loading Pictures from Firebase Storage to React
body: <p>I'm trying to retrieve an image url from Firebase Storage and then setting an image with that url. However, it seems that I am setting the src to an undefined value with my current code: </p>
  
  <p>This is my function I'm using to retrieve from Firebase Storage</p>
  
  <pre><code>import {Firebase, 
          FirebaseAuth, 
          FirebaseDatabase, 
          FirebaseStorage} from '../Initialize'
  
  export function getProfilePictureUrl(uid, callback, onErrorCallback) {
      var pathReference = FirebaseStorage.ref('profiles/' + uid + '/profilePicture.jpeg');
  
      pathReference.getDownloadURL().then((url) =&gt; {
          callback(url);
      }).catch((error) =&gt; {
          onErrorCallback(error);
      });
  }
  </code></pre>
  
  <p>I call it from a React Component that uses the function like this:</p>
  
  <pre><code>render() {
      let profilePictureUrl = getProfilePictureUrl(uid, (url) =&gt; {
          console.log(url); // The console.log(url) returns a valid and working url for the image. So I know my imports are correct
          return url;
      },
      (error) =&gt; {
          console.log(error.code);
          return "";
      })
      return (
          &lt;img
              src={profilePictureUrl}
          /&gt;
      );
  }
  </code></pre>
  
  <p>The image is not loaded properly as ProfilePictureUrl returns undefined.</p>
  
  <p>I also used tried to make a tester inside render() like this: </p>
  
  <pre><code>render() {
       if(profilePictureUrl !== undefined) {
            console.log("defined");
       }
       else {
           console.log("undefined");
       }
       // returns 'undefined'
  }
  </code></pre>
  
  <p>And I was being logged the else response indicating that the function was returning a undefined value. My suspicion is that it has something to do with Firebase's asynchronous nature, but I am not sure how to solve it.</p>
  
  <p>This question may be related to: <a href="https://stackoverflow.com/questions/39385219/react-native-download-image-from-firebase-storage">React-Native: Download Image from Firebase Storage</a></p>