Как отобразить изображение, полученное из БД в ангуляр?

Данные, которые я получаю с БД содержат всю инфу, включая фото, приходят одним ГЕТОМ. Выводится всё, кроме фото. Как можно отобразить аватарку пользователя из массива searcherImages в таком случае?

Контейнер карточки.

 <div class="form-group">
              <label for="phone">Image</label>
              <input type="file"  multiple value="select" #selectFile  class="form-control" name="searcherImages"
                 (change)="onImageSelected($event)">
            </div>

  <div class="container" id="main-container">
     <div class="row">
       <div *ngFor="let searcher of searchers" class="col-md-6 col-xl-3">
          <div class="card m-b-30">
             <div class="card-body row">
                <div class="col-6" *ngFor="let file of searcher.searcherImages; ">
                   <img [src]="file.url" >
                </div>
                <div class="col-6 card-title align-self-center mb-0">
                   <h5>{{searcher?.name}}</h5>
                   <p class="m-0">{{searcher?.gender}}</p>
                </div>
             </div>
             <ul class="list-group list-group-flush">
                <li class="list-group-item"><i class="fa fa-envelope float-right"></i>{{searcher?.email}}</li>
                <li class="list-group-item"><i class="fa fa-phone float-right"></i>Phone : {{searcher?.phone}}</li>
             </ul>
             <div class="card-body">
                <div class="float-right btn-group btn-group-sm">
                   <a (click)="onOpenModal(searcher, 'edit')" class="btn btn-primary tooltips" data-placement="top" data-original-title="Edit"><i class="fa fa-pencil"></i> </a>
                   <a (click)="onOpenModal(searcher, 'delete')" class="btn btn-secondary tooltips" data-placement="top" data-original-title="Delete"><i class="fa fa-times"></i></a>
                </div>
             </div>
          </div>
       </div>
    </div>

Интерфейс, с помощью которого я преобразовывю изображение в БЛОБ.

import { SafeUrl } from "@angular/platform-browser"

export interface FileHandle  {
    file: File,
    url: SafeUrl
}

Обрабатываю и отправляю фото на бэк.

 public onAddSearcher(addForm: NgForm) {

    const searcherFormData = this.prepareFormData(this.searcher);

    document.getElementById('add-searcher-form')?.click();
    this.searcherService.addSearcher(searcherFormData).subscribe({
      next: (response: Searcher) => {
        this.getSearchers();
        addForm.reset();
      },
      error: (error: HttpErrorResponse) => {
        alert(error.message);
        addForm.reset();
      }
    });
  }

  prepareFormData(searcher: Searcher): FormData {
    const formData = new FormData();

    formData.append(
      'searcher',
      new Blob([JSON.stringify(searcher)], {type: 'application/json'})
    );
    
    for(var i = 0; i < searcher.searcherImages.length; i++) {
      formData.append(
        'imageFile',
        searcher.searcherImages[i].file,
        searcher.searcherImages[i].file.name
      );
    }
    return formData;
  }
  onImageSelected(event) {
    if(event.target.files) {
      const file = event.target.files[0];
      
      const fileHandle: FileHandle = {
        file: file,
        url:  this.sanitazer.bypassSecurityTrustUrl(
          window.URL.createObjectURL(file)
        )
      }

      this.searcher.searcherImages.push(fileHandle);
    }
  } 
}