How to get dynamic Image url path in ng App-CodePudding

I want to give an image a dynamic and relative path.

scenario: 2 separate projects, first: webapi net core, and the second: angular app. in the ng app I have a component employeelist, when u click on a row, the details panel of the employee appears, of which the photo is a part of. Is there a way to get the path of the photo dynamic? the photos are in a folder within the first project (webapi project) -see picture

<div mat-card-avatar *ngIf="!(sourceImageFile == undefined)" style="background: url('/Documents/companies/employees/Images/'{{sourceImageFile}})" >

CodePudding user response：

With static files middleware configured, an ASP.NET Core app will serve all files located in certain wwwroot folder by default. To serve static files outside of web root, you can configure the Static File Middleware as below.

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
           Path.Combine(builder.Environment.ContentRootPath, "Documents")),
    RequestPath = "/Documents"
});

You can check this doc for more details: https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-6.0#serve-files-outside-of-web-root

CodePudding user response：

[Solved] I converted the photo stream to base64 in the api.

var employeeImagePath = BaseDocumentsPath   folderName   "\\employees\\Images\\"   fileName; 
byte[] fileStream = System.IO.File.ReadAllBytes(employeeImagePath);
var imageextension = Path.GetExtension(fileName).Substring(1);
var imagedata = Convert.ToBase64String(fileStream);
var empPicViewModel = new EmployeePictureViewModel
{
Image = imagedata
};
var result = JsonConvert.SerializeObject(empPicViewModel);
return result;

After that, in the ng App, in the call to the web api, I create objectUrl in the following way:

this.service.getConvertedEmployeeImage(fileName).subscribe((data: any) =>{

    let objectUrl = 'data:image/jpeg;base64, '   data["Image"];
    this.sourceImageFile = this.sanitizer.bypassSecurityTrustUrl(objectUrl);
  });

The html looks like this:

<img [src]="sourceImageFile" alt="">