How to show a Blob image file using tag in the view in angular?

Question

I am using asp.net core 5 and angular 15.0 for backend and frontend respectively. when I download a saved image file by passing its Url to downloadFile action in server side, the action method sends it as a Blob to the front side. the action method is given below:

[HttpGet("downloadFile"), DisableRequestSizeLimit]
        public async Task<IActionResult> DownloadFile([FromQuery] string fileUrl)
        {
            var filePath = Path.Combine(Directory.GetCurrentDirectory(), fileUrl);

            if (!System.IO.File.Exists(filePath))
                return NotFound();

            var memory = new MemoryStream();
            await using (var stream = new FileStream(filePath, FileMode.Open))
            {
                await stream.CopyToAsync(memory);
            }
            memory.Position = 0;

            return File(memory, GetContentType(filePath), filePath);
        }
        //=====================================================
        private string GetContentType(string path)
        {
            var provider = new FileExtensionContentTypeProvider();
            string contentType;
            
            if (!provider.TryGetContentType(path, out contentType))
            {
                contentType = "application/octet-stream";
            }
            
            return contentType;
        }
       
    }

in the frontend, The method which receives the Blob image file is as follows:

this.filesService.download(this.imgUrl).subscribe((event) => {
         if (event.type === HttpEventType.UploadProgress)
           { 
             this.progress = Math.round((100 * event.loaded) / event.total);
           }
         else if (event.type === HttpEventType.Response) {
           this.message = 'Download success.';          
           this.downloadFile(event);
         }
       });
       
//============================================================       
  private downloadFile = (data: HttpResponse<Blob>) => {
    const BlobFile= new Blob([data.body], { type: data.body.type });
    // BlobFile is: size: 12343, type:"image/jpeg", [[prototype]]: Blob
    
    const url = URL.createObjectURL(BlobFile);
    //url is: "blob:http://localhost:4200/9ee358cd-a80a-4929-bd45-fe45dc32ac12"
    
    
    // What code should be written here to show image in the view?
  }

and the download method in the service is:

 public download(fileUrl: string) {
    return this.http.get(`${this.baseUrl}/downloadFile?fileUrl=${fileUrl}`, {
      reportProgress: true,
      observe: 'events',
      responseType: 'blob'
    });
  }

Now at this point, how do I use blobFile or url in the downloadFile method for the <img> tag so that the image is displayed in the view?

<img src="???" >

Thank you if you provide a suitable solution.