Relative Image URL-CodePudding

I am uploading the user image and store image in folder and their names in database

Image upload done by angular
Image store to folder and database done by dotnet core api

Both operations works fine ,but I am unable to display the stored Image in site.

SQL database store image url

To access this image in client side I am using following in angular

Component.html file

 <img [src]="createImgPath()" alt="profile picture" style="width:60px; height:60px;">

.ts file

 public createImgPath = () => {
debugger;
if(this.studentPriviewImage==null)
{
  return this.fallback;
}else{  
  console.log(data1);
  return environment.baseUrl this.studentPriviewImage.filepath1; 
}

}

which returns http://localhost:9529/Resources/Group/student_Photo/11/3/18/3_20220127002626AM.png

If I directly try to access this in browser than I am getting following error

My Solution folder structure where image files are being stored.

Still not getting what is the problem. What is wrong in this approach.

CodePudding user response：

If you want to serve files outside of web root,you need to add the following configuration in StartUp.cs:

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