Use image field instead of fire storage

src/app/store/categories.component.html

@@ -9,8 +9,8 @@
             </nav>
             <ng-container *ngFor="let c of categories | async">
                 <mat-card class="m-3" (click)="navigate(c.name)">
-                    <img *ngIf="c.ready" mat-card-image [src]="c.image | async" [alt]="c.name" style="width: 200px; height: 200px;">
-                    <mat-divider *ngIf="c.ready" class="custom-line"></mat-divider>
+                    <img *ngIf="c.image" mat-card-image [src]="c.image" [alt]="c.name" style="width: 200px; height: 200px;">
+                    <mat-divider *ngIf="c.image" class="custom-line"></mat-divider>
                     <mat-card-content>
                         <h5>{{c.name}}</h5>
                     </mat-card-content>

src/app/store/categories.component.ts

@@ -15,7 +15,6 @@ export class CategoriesComponent {
 
   constructor(
     private db: AngularFirestore,
-    private storage: AngularFireStorage,
     private router: Router,
     private route: ActivatedRoute,
     public breadcrumb: BreadcrumbService
@@ -32,13 +31,7 @@ export class CategoriesComponent {
         .valueChanges()
         .pipe(
           map(rows =>
-            rows
-              .filter((row: any) => (!this.category && !row.parent) || (this.category && row.parent == this.category))
-              .map((row: any) => {
-                row.image = this.storage.ref(`${row.name.toLowerCase()}.jpg`).getDownloadURL();
-                row.image.subscribe(() => (row.ready = true));
-                return row;
-              })
+            rows.filter((row: any) => (!this.category && !row.parent) || (this.category && row.parent == this.category))
           )
         );
     });