Retrive data from firebase database

#1

Hi,

db
db.jpg811x536 71.4 KB

I have the image file name stored on database. How can I retrieve the corresponding url and disply it?

home.ts

var query = firebase.database().ref("photos/" + uidd).orderByKey();
query.once("value")
  .then(function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
      var url = childSnapshot.val().txt;
      console.log('url');
      console.log(url);

      var webUrl = firebase.storage().ref(url);
      webUrl.getDownloadURL().then(function(url) {
      console.log('webUrl');
      console.log(webUrl.fullPath);

      imageUrls.push(url);
      console.log('imageUrls');
      console.log(imageUrls);

home.html

    <ion-grid>
      <ion-row>
        <ion-col col-12 col-sm-4 col-md-3 col-lg-2 *ngFor="let image of imageUrls">
          <img [src]="image" style="width:128px;height:128px;"/>
        </ion-col>
      </ion-row>
    </ion-grid>

What is wrong?

#2

Have you tried to open one of the URLs from the above console log in a browser? Then you know if it is a valid URL at all, which can also indicate an issue at the server

#3

Yes the url are valid

url
url.jpg962x160 59 KB

I think after snapshot.forEach( the imageUrls is destryed. How can I avoid this?

#4

For one thing, never type the word function inside of one. You will lose execution context. Use fat arrows instead.