Estoy tratando de recuperar una URL de imagen de Firebase Storage y luego configurar una imagen con esa URL. Sin embargo, parece que estoy configurando el src en un valor indefinido con mi código actual:
Esta es mi función que estoy usando para recuperar de 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); }); }Lo llamo desde un React Component que usa la función así:
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} /> ); }La imagen no se carga correctamente porque ProfilePictureUrl devuelve undefined.
También traté de hacer un probador dentro de render() como este:
render() { if(profilePictureUrl !== undefined) { console.log("defined"); } else { console.log("undefined"); } // returns 'undefined' }Y estaba registrando la respuesta else que indicaba que la función devolvía un valor indefinido. Mi sospecha es que tiene algo que ver con la naturaleza asíncrona de Firebase, pero no estoy seguro de cómo resolverlo.
Esta pregunta puede estar relacionada con: React-Native: Descargar imagen de Firebase Storage
Encontré esto a través de Google y decidí responder en caso de que otros también lo encuentren.
Su ejemplo no funciona porque React no actualiza el componente cuando se resuelve la promesa. Esto significa que la URL de su imagen permanece undefined .
Para solucionar esto, puede llamar a this.setState() en la promesa (o enviar una acción si está usando flux/redux). Esto actualizará automáticamente el estado con la nueva URL.
ejemplo de código
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> ); } }Codepen completo: https://codepen.io/DeividasK/pen/pRmbWq