Display Image from server. Angular

I am trying to load image from server. I was getting unsafe error earlier but after using domSanitizer it was resolved . However, no any image is loaded in the component. I am not able to figure out, where the code execution went wrong.

<button id="btnPreview " class="ml-2 btn-md actions " aria-hidden="true " (click)="previewImage() "> <ng-template #imagePreview><img [src]="imageToShow" alt="Place image title" *ngIf="!isImageLoading">

Service.ts

readonly GetTiffPreview = (
placeHolderText: string,
placeHolderTextFont: string,
placeHolderPosition: string
): Observable<any> => {
let param = new HttpParams()
param = param
.set('placeHolderText', String(placeHolderText))
.set('placeHolderTextFont', placeHolderTextFont)
.set('placeHolderPosition', placeHolderPosition)
return this.http.get(
this.configService.getApiUrl() + '/slipsheet/getslipsheetforpreviewtext',
{
responseType: 'blob',
params: param
}

Component.ts

previewImage(){
const delRef = this.dialog.open(this.imagePreview, {
closeOnNavigation: true,
autoFocus: false,
width: '350px'
})
this.isImageLoading = true
const body: SlipsheetTemplateModel = this.slipsheetTemplateForm.value
const placeHolderPosition = StampLocation[body.placeHolderPosition]
delRef
.afterOpened()
.pipe(
switchMap(() =>
this.ssService.GetTiffPreview(
body.placeHolderText,
body.placeHolderTextFont,
placeHolderPosition
)
),
debounceTime(100),
takeUntil(this.toDestroy$))
.subscribe(
(data) => {
 this.createImageFromBlob(data)
 this.isImageLoading = false
 },
 (error) => {
this.isImageLoading = false
console.log(error)
})
}

createImageFromBlob(image: Blob) {
let reader = new FileReader()
reader.addEventListener(
'load',
() => {
this.imageToShow = this.domSanitizer.bypassSecurityTrustUrl(
String(reader.result)
)
},
false
)

if (image) {
  reader.readAsDataURL(image)
}
}