title: Loading a user's profile image
body: <p>I am using React, Redux, and Firebase to build a website. I use firebase storage to store a user's profile image and want it to be displayed on the website once the user has created an account. My approach used to be to include the following image element in every component that needs to display the profile image:</p>
  
  <pre><code>//1st Approach
  render(){
  
          const { auth } = this.props;
  
          return(
                         .......
  
                          &lt;img src={firebase.storage().ref(`images/`+auth.uid).getDownloadURL()}&gt;&lt;/img&gt;
  
                         ......
  
  </code></pre>
  
  <p>However, doing so displayed only the default image icon (green mountain and white cloud with sky-blue background) and the console reported the "404" error saying that the object "images/undefined" does not exist. It is likely that the error occurred because the getDownloadUrl method was called before the the auth was passed from Redux state to the component. Another approach I tried was to add a "profileimage" field in the state of the component and set the field value to the image URL inside componentDidMount:</p>
  
  <pre><code>//2nd Approach
          componentDidMount() {
  
             const { auth } = this.props;
             const id = auth.uid;
             const image = firebase.storage().ref(`images/`+id);
             image.getDownloadURL().then((url) =&gt; this.setState({ profileimage: url }));
          }
  
          ......
  
           &lt;img src={this.state.profileimage}&gt;&lt;/img&gt;
  </code></pre>
  
  <p>The second approach successfully displayed the image. However, since componentDidMount is only called once during the lifecycle of a component, if the user refreshes the page, the "profileimage" will be set to an empty string. So I am wondering how I can achieve the feature in the most appropriate way. Thanks!</p>