How to display an image in angular from asp.net core

I'm building a project in angular 6 and asp.net core. I have an images saved on the server, and I save the image path and image name in the db.

I've tried passing the image path to angular after using domSanitizer but the browser still says "Not allowed to load local resource: {filepath}"

component.ts

photo: Photo;
imageToShow: any;

getPhoto() {
    this.fileService.getPhoto().subscribe(response => {
      this.photo = response;
      this.imageToShow = this.sanitizer.bypassSecurityTrustResourceUrl(this.photo.thumbPhotoPath);
    });
  }

component.html

<img [src]="imageToShow">

service.ts

getPhoto(id: number) {
      return this.http.get<Photo>(this.baseUrl + 'get-photo/' + id);
  }

Controller

[HttpGet("get-photo/{id}")]
public async Task<IActionResult> GetPhoto(int id) 
{
    var photo = await _repo.GetPhoto(id);

    var pathToImage = Path.Combine(photo.ThumbPhotoPath, photo.ImageName);

    FilePhoto photoData = new FilePhoto()
    {   
        Id = photo.Id,
        ThumbPhotoPath = pathToImage,
    };
    return Ok(photoData);
}

Does anyone know the best way to display the image stored on the server to angular? Should I be passing it back as a blob instead? and if so what would be the best way to do that?

Thanks