• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

324
Vistas
Loading Pictures from Firebase Storage to React

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

about 3 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

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

about 3 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda