I'm attempting to dynamically display a background image of a div using ngStyle. I have also set a fallback image in case the default value is null.
<div class="card-img-top"
[ngStyle]="{'background-image': process.thumbnail != null ? 'url(data:image/png;base64,' +
process.thumbnail +')' : 'url(./assets/default-thumbnail.png)' | safeHtml}"
>
Although it functions correctly, I am receiving console warnings for all the thumbnails, such as the following:
core.js:6462 WARNING: sanitizing unsafe URL value data:image/pngbase64,iVBORw0KGgoAAAANSUhEUgAAAQIAAABxCAYAAAA+..
Even after sanitizing the URL with safePipe, the warning persists. I'm uncertain if I have implemented it correctly
import { Pipe } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({name: 'safeHtml'})
export class SafeHtml {
constructor(private sanitizer:DomSanitizer){}
transform(value) {
return this.sanitizer.bypassSecurityTrustStyle(value);
}}