What is the correct way to obtain an asynchronous resource in the mapping of some data?

Question

From the following data set I am trying to replace the value of the logoUrl property which is a protected blob resource in S3 with a value that I can use in the template

[
  {
    id: 2,
    name: "ABC",
    logoUrl: null,
  },
  {
    id: 1,
    name: "DEF",
    logoUrl:
      "https://assets.demo.app.net/bucket/154F460F8FAE344F13C29962931CBD3C1F1384F7A9DF9F548D23CF4AFF5E6811-some-name.jpeg",
  },
  {
    id: 3,
    name: "GHI",
    logoUrl:
      "https://assets.demo.app.net/bucket/4CA2F69627B51F7F07A39642DB3538A3D55564891F456528067B47DCEED61B4F-some-name.png",
  },
  {
    id: 6,
    name: "JKL",
    logoUrl: null,
  },
];

To this end I try to implement the following Resolve

@Injectable({
  providedIn: 'root',
})
export class FetchDataResolver implements Resolve<Model[]> {
  constructor(
    private dataService: DataService,
    private s3Service: S3Service
  ) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<Model[]> {
    return this.dataService
      .getAll()
      .pipe(
        map((data) => data.sort((a, b) => a.name.localeCompare(b.name)))
      );
  }
}

The problem I'm trying to solve is how inside .pipe() Could I map the response of getting the resource from S3 and then replace the record. Because the first action is an asynchronous operation.

The S3 service has two methods, one is responsible for obtaining the resource that is a blob and the second is responsible for obtaining a url that I can use in the template to display the image. The service is as follows

@Injectable({
  providedIn: 'root',
})
export class S3Service {
  constructor(
    private domSanitizer: DomSanitizer,
    private httpClient: HttpClient
  ) {}

  getResource(resource: string): Observable<Blob> {
    return this.httpClient.get(resource, { responseType: 'blob' });
  }

  getSourceFromBlob(blob: Blob): SafeUrl {
    return this.domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(blob));
  }
}

The expected result is similar to the following

[
  {
    id: 2,
    name: "ABC",
    logoUrl: null,
  },
  {
    id: 1,
    name: "DEF",
    logoUrl:
      "blob:http://localhost:4200/e9113189-d08e-485c-b61a-5a8f5f4a0fdd",
  },
  {
    id: 3,
    name: "GHI",
    logoUrl:
      "blob:http://localhost:4200/e9113189-d08e-485c-b61a-5a8f5f4a0fdd",
  },
  {
    id: 6,
    name: "JKL",
    logoUrl: null,
  },
];