'What is a graceful fallback for @angular/fire getDownloadURL pipe

According to the @angular/fire/storage documentation, there exists a convenient pipe (getDownloadURL) that will fetch storage files directly from the template.

Its usage is as follows:

*.module.ts

import { GetDownloadURLPipeModule } from '@angular/fire/storage';

*.component.ts

@Component({
  selector: 'app-root',
  template: `<img [src]="'users/davideast.jpg' | getDownloadURL" />`
})
export class AppComponent {}

So far, this is my favorite way to pull images directly from storage as it's super simple and indeed, convenient. However, there doesn't appear to be a decent fallback for cases where the requested file/image doesn't exist in storage.

What is the preferred way to create a fallback for this pipe so I can avoid broken images in the UI and my console descending into what looks like a hell themed Christmas Tree?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source