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?