Laden von Bildern aus dem Firebase-Speicher zum Reagieren

Question

Ich versuche, eine Image-URL aus Firebase Storage abzurufen und dann ein Image mit dieser URL festzulegen. Allerdings scheint es, dass ich die src auf einen nicht definierten Wert mit meinem aktuellen Code bin Einstellung:

Das ist meine Funktion von Firebase Speicher Ich verwende

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); 
    }); 
} 

ich es von einem Reagieren Component aufrufen abrufen dass nutzt die Funktion wie folgt aus:

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} 
     /> 
    ); 
} 

Das Bild wird nicht richtig geladen wird als ProfilePictureUrl undefined zurückgibt.

Ich habe auch versucht, einen Tester im Innern zu machen() wie folgt machen:

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

Und ich war, welche die sonst Antwort protokolliert wird, dass die Funktion einen nicht definierten Wert zurückkehrt. Mein Verdacht ist, dass es etwas mit der asynchronen Natur von Firebase zu tun hat, aber ich bin mir nicht sicher, wie ich es lösen soll. React-Native: Download Image from Firebase Storage dieser via google

Answer 1

gefunden und beschlossen, zu beantworten, falls andere es finden auch:

Diese Frage kann in Beziehung gesetzt werden.

Ihr Beispiel funktioniert nicht, da React die Komponente nicht aktualisiert, wenn das Versprechen verrechnet wird. Dies bedeutet, dass Ihre Bild-URL undefined bleibt.

Um dies zu beheben, können Sie this.setState() im Versprechen (oder eine Aktion senden, wenn Sie Flussmittel/Redux verwenden) aufrufen. Dies aktualisiert automatisch den Status für Sie mit der neuen URL.

---

Codebeispiel

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> 
    ); 
    } 
} 

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