Loading Pictures from Firebase Storage to React

Question

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:

This is my function I'm using to retrieve from Firebase Storage

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) => {
        callback(url);
    }).catch((error) => {
        onErrorCallback(error);
    });
}

I call it from a React Component that uses the function like this:

render() {
    let profilePictureUrl = getProfilePictureUrl(uid, (url) => {
        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) => {
        console.log(error.code);
        return "";
    })
    return (
        <img
            src={profilePictureUrl}
        />
    );
}

The image is not loaded properly as ProfilePictureUrl returns undefined.

I also used tried to make a tester inside render() like this:

render() {
     if(profilePictureUrl !== undefined) {
          console.log("defined");
     }
     else {
         console.log("undefined");
     }
     // returns 'undefined'
}

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.

This question may be related to: React-Native: Download Image from Firebase Storage

Answer 1

Found this via google and decided to answer in case others find it too.

Your example is not working, because React does not update the component when the promise resolves. This means that your image URL remains undefined.

To fix this, you can call this.setState() in the promise (or dispatch an action if you are using flux / redux). This will automatically update the state for you with the new URL.

---

Code example

const config = {
  apiKey: "apiKey",
  authDomain: "authDomain",
  storageBucket: "bucketURL"
}

firebase.initializeApp(config)
const storage = firebase.storage().ref()

class HelloMessage extends React.Component {
  constructor () {
    super()
    this.state = {
      lithuania: '',
      uk: ''
    }

    this.getImage('lithuania')
    this.getImage('uk')
  }

  getImage (image) {
    storage.child(`${image}.png`).getDownloadURL().then((url) => {
      this.state[image] = url
      this.setState(this.state)
    })
  }

  render() {
    return (
      <div>
        Hello Lithuania<br />
        <img src={ this.state.lithuania } alt="Lithuanian flag" />
        <br />
        Hello United Kingdom<br />
        <img src={ this.state.uk } alt="UK flag" />
      </div>
    );
  }
}

Full codepen: https://codepen.io/DeividasK/pen/pRmbWq