I am getting a StatusCode of 401() in the console when trying to fetch and display an Image from my .NetCore 8.0 webAPI in my Angular19 application. Please read the case-scenario below, very closely and minutely.

I am uploading image from my nG19 application and it gets copied to a folder called RecipeImages under Resources under my webAPI project structure, ie. the path is

webAPI project–> Resources–> RecipeImages(here images are copied)

Simultaneously I am saving the path also in the database. The images are being copied to the desired path absolutely fine. Also the respective paths are also being saved in the database just fine.

Example of a saved path in database is: ResourcesRecipeImagesNigella_GarlicButterMushroom_638706726811613226.jpg

** Note that above path is with backslashes. I basically followed the approach used in this tutorial to do the task:
https://code-maze.com/upload-files-dot-net-core-angular/

Now I am trying to display this image in a component. Upon ngOnInt, I have written code to make call to backend service and get all the data from that database table. Fetching them and preparing the path to bind to src attribute of the image control;

component.html:

<img [src]="createImagePath(selectedRecipeDetails.imagePath)" alt="" class="circular_recipe" style="height:410px; width: 410px;" />

component.ts:

createImagePath(path:any)
  {
    return `https://localhost:7164/${path}`;
  }

When I am inspecting the blank/vacant image element on my page, the complete path that I am getting on the src attribute is as:

src="https://localhost:7164/ResourcesRecipeImagesNigella_GarlicButterMushroom_638706726811613226.jpg"

7164 being the port number on which my webAPI backend is running of course. As you can see there is a whole lot of mess with front and backslashes.
I also made code changes in Program.cs so that my webAPI backend can serve static files. Like so,

Program.cs

app.UseStaticFiles(new StaticFileOptions()
{
    FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @"Resources")),
    RequestPath = new PathString("/Resources")
});

Basically I did everything in toe-toe, with the tutorial. Still I am unable to understand why I am unable to render the image in my component. I downloaded and ran the finished project from that tutorial to make sure that it is a working, functional and correct. It is! But why the anomaly in my application? Goes without saying if I manually change all the backslashes in the saved path in the database to frontslashes, it still doesn’t serve anything! My image control remains blank.

Can you folks spot anything? Any small detail that I may be overlooking? Or is there more code to be added/edited in frontend and backend?

Please help sort this!