AngularFire2 / Firestore Storage - getDownloadURL() (Ionic)

Question

I'm a fairly new Ionic developer building this project list Ionic app using Firestore and everything has worked out great up until this point - where I now want to add a picture to my project.

After having the picture successfully uploaded to Storage - I managed to save the URL to my project and I thought that was it, and that it should be working by simply referencing it like " [src]="project.picture" , but I came to realize that it didn't provide me with the complete URL to Firestore Storage, the last bit apparently has to be received by using the method " getDownloadURL() "?.

Below code is one of the approaches, that I have tried to accomplish this with - unsuccessfully. By executing fore mentioning code results in a not responding app, which then leads to crash and no project picture ..

projectlist.html

<ion-card *ngFor="let project of projectsService.projectList | async" (click)="openProject(project)">

                <ion-card-content>
                  <ion-item text-right><h3><b>Status:</b> {{project.status}}</h3></ion-item>
                <ion-item text-left text-wrap>
                    <p><img *ngIf="project.picture"[src]="getProjectPictureByRowId(project)"></p>
                      <h2><b>{{project.name}}</b></h2> 
                      <p>{{project.description}}</p>
                </ion-item>

projectlist.ts

getProjectPictureByRowId(project : Project) {
  project.picture = this.projectsService.getProjectPictureByRowId(project);
}

projects.ts (Provider)

getProjectPictureByRowId(project) {

const ref = this.storage.ref(project.picture);
return project.picture = ref.getDownloadURL().toString();

}

I had a semi-working solution using below code from docs ( https://github.com/angular/angularfire2/blob/master/docs/storage/storage.md ), but only worked when opening a single project but not in projectlist:

@Component({
selector: 'app-root',
template: `<img [src]="profileUrl | async" />`
})
export class AppComponent {
profileUrl: Observable<string | null>;
constructor(private storage: AngularFireStorage) {
 const ref = this.storage.ref(project.picture);
 this.profileUrl = ref.getDownloadURL();
 }
}

I'm at a loss here - I have used up all my Google-fu. Please help me!

Regards,

Jens

Answer 1

If you look at the definition of StorageReference.getDownloadUrl() you will see that it returns a promise:

getDownloadURL(): Promise<string> { ...

So the call doesn't return the URL itself, but a promise that will resolve to that URL eventually. Any code that needs the download URL needs to handle this fact that it is loaded asynchronously.

In AngularFire2 (which wraps the above code) this promise is translated into the download URL being an observable. According to the AngularFire documentation that means you need to bind it to our HTML as async . So:

<img *ngIf="project.picture" [src]="getProjectPictureByRowId(project) | async"></p>