I am facing a challenge where I need to use Angular's http client to retrieve a base64 string from the backend and display it as an image in the view. However, I have encountered an issue with XSS security policies that prevent me from loading the string directly into the view. Here is the code snippet I tried:
public image$: ReplaySubject<string> = new ReplaySubject(1);
public loadImage(): void {
...
this.deviceService.getItem(deviceId, itemId).then((response) => {
this.image$.next(response.imageString);
}
}
<img [src]="(image$ | async)" />
I attempted to use DomSanitizer to bypass security and trust the string. While this approach worked for static strings, I struggled to implement it properly for asynchronous cases.
public image: string = this.sanitizer.bypassSecurityTrustUrl("data:image/png;base64,...");
<img [src]="image" />
I experimented with different approaches using DOM manipulation or ViewChild but failed to find a suitable solution for displaying an image obtained from a base64 string retrieved asynchronously. How can I successfully showcase an image fetched via an async call?