How to display an image via an async base64 string in Angular
I'd suggest you several options:
Use custom pipe to transform your string to SafeResourceUrl
safe.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';import { DomSanitizer } from '@angular/platform-browser';@Pipe({ name: 'safe'})export class SafePipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) {} transform(url) { return this.sanitizer.bypassSecurityTrustResourceUrl(url); }}html
<img [src]="image$ | async | safe" />Convert string to SafeResourceUrl manually
ts
image$: ReplaySubject<SafeResourceUrl> = new ReplaySubject(1);...this.image$.next(this.sanitizer.bypassSecurityTrustResourceUrl(response.imageString));