How to get file from Azure Blob Storage to display in the browser using C# api and Angular

Question

My api code returns a file, no problem:

[HttpGet("downloadProfilePic")]
    public async Task<FileStreamResult> DownloadProfilePic()
    {
        try
        {
            var containerName = "profilepics";
            string storageConnection = _config.GetSection("StorageConnectionString").Value;

            CloudStorageAccount cloudStorageAccount = CloudStorageAccount.Parse(storageConnection);
            CloudBlobClient blobClient = cloudStorageAccount.CreateCloudBlobClient();
            CloudBlobContainer blobContainer = blobClient.GetContainerReference(containerName);
            CloudBlockBlob blockBlob = blobContainer.GetBlockBlobReference((await _userService.GetUserGuid().ConfigureAwait(false)).ToString());

            MemoryStream memoryStream = new MemoryStream();
            await blockBlob.DownloadToStreamAsync(memoryStream).ConfigureAwait(false);
            memoryStream.Position = 0;
            return FileStreamResult(memoryStream, "image/png");
        }
        catch (Exception ex)
        {
            throw new Exception(ex.Message);
        }
    }

My angular service is not receiving properly:

downloadProfilePic(): Observable<any> {
    return this.http.get<any>(this._url + '/downloadProfilePic');
}

The error interceptor is firing and I don't know why:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request).pipe(catchError(err => {
  if (err.status === 401) {
    // auto logout if 401 response returned from api
    this.authenticationService.logout();
    location.reload(true);
  }

  const error = err.error || err.statusText;
  return throwError(error ? error : err);
}))

}

Screenshot of error:

What am I doing incorrectly here? I want to display this memoryStream in the browser.

EDIT: removed the errorHandler in angular service code.

Traced call stack back and found this:

Answer 1

Actually, there is no need to downloadProfilePic in the angular service. If you just use <img src="<your.api.path.goes.here>" in your template/html code, your api controller will return the file without the need to go through the angular service.