resolve path of blog images

src/app/components/image-slider/image-slider.component.spec.ts

@@ -16,7 +16,7 @@ describe('ImageSliderComponent', () => {
           useValue: { 
             downloadUrl: () => Promise.resolve('') 
           }
-        }        
+        }
       ]
     })
     .compileComponents();

src/app/pages/blog/blog.component.html

@@ -1,8 +1,8 @@
 <div class="card" *ngFor="let post of blogPosts$ | async">
     <mat-card class="card">
         <mat-card-header>
-            @if (post.images) {
-                <img class="thumbnail" mat-card-lg-image [src]="post.images[0].value" />
+            @if (post.imageSrc) {
+                <img class="thumbnail" mat-card-lg-image [src]="post.imageSrc" />
             }
             <mat-card-title-group>
                 <mat-card-title>

src/app/pages/blog/blog.component.spec.ts

@@ -4,6 +4,7 @@ import { of } from 'rxjs';
 
 import { BlogComponent } from './blog.component';
 import { BlogService } from '../../services/blog.service';
+import { StorageService } from '../../services/storage.service';
 
 const params = {
   tag: 'foo'
@@ -29,6 +30,12 @@ describe('BlogComponent', () => {
           useValue: { 
             data$: of([])
           }
+        },
+        {
+          provide: StorageService,
+          useValue: { 
+            downloadUrl: () => Promise.resolve('') 
+          }
         }
       ]
     })

src/app/pages/blog/blog.component.ts

@@ -2,8 +2,10 @@ import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { ActivatedRoute, RouterModule } from '@angular/router';
-import { map } from 'rxjs';
+import { map, switchMap } from 'rxjs';
 import { BlogService } from '../../services/blog.service';
+import { StorageService } from '../../services/storage.service';
+import { BlogPost } from '../../models/blog.model';
 
 @Component({
     selector: 'app-blog',
@@ -15,15 +17,30 @@ import { BlogService } from '../../services/blog.service';
 export class BlogComponent {
     readonly route = inject(ActivatedRoute);
     readonly service = inject(BlogService);
-    readonly blogPosts$ = this.service.data$;
+    readonly storageService = inject(StorageService);
+    readonly blogPosts$ = this.service.data$.pipe(
+        switchMap(async (posts) => this.resolveUrl(posts))
+    );
 
     constructor() {
         const tag = this.route.snapshot.params['tag'];
         if (tag) {
             this.blogPosts$ = this.service.data$.pipe(
-                map((posts) => posts.filter((post) => post.tags?.includes(tag)))
+                map((posts) => posts.filter((post) => post.tags?.includes(tag))),
+                switchMap(async (posts) => this.resolveUrl(posts))
             );
             document.title = 'Blog - ' + tag + ' | Why App';
         }
     }
+
+    private async resolveUrl(posts: BlogPost[]) {
+        return Promise.all(posts.map(async (post) => {
+            const path = post.images[0].value;
+            const imageUrl = await this.storageService.downloadUrl(path);
+            return { 
+                ...post, 
+                imageSrc: imageUrl 
+            };
+        }));
+    }
 }