javascript - Loading Pictures from Firebase Storage to React - Stack Overflow

admin管理员组

文章数量:1399013

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

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

• javascript
• reactjs
• firebase
• firebase-storage

Share Improve this question Follow edited May 23, 2017 at 12:34 CommunityBot 111 silver badge asked Jan 2, 2017 at 4:47 Michael LaiMichael Lai 7511 gold badge22 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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 ponent 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

本文标签： javascriptLoading Pictures from Firebase Storage to ReactStack Overflow