Set CSS background-image value in Angular
Component Html code
<div *ngIf="doc.filePreviewUrl" class='imageDiv' [style.background-image]="getSafeUrl(filePreviewUrl)"></div>
Component TS code
import { DomSanitizer } from '@angular/platform-browser';
constructor(private sanitization: DomSanitizer) { }
// Return trust style
getSafeUrl(filePreviewUrl){
return this.sanitization.bypassSecurityTrustStyle('url(\'' + filePreviewUrl + '\')');
}
Component CSS
.imageDiv{
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
Last updated
Was this helpful?