Static Files or Images (PNG) doesn't load using C# NET 6 with React.js-CodePudding

I'm using Visual Studio 2022 net 6.0 for create a react project. I used the ASP.Net Core with React.JS template

Visual Studo 2022 Template

I'm following this tutorial for create a new react application: https://youtu.be/uii_TmfCjiM

My problem is the part Minute 22:00 of the video. Where he add a validation in react for add a static file (And PNG image) to be specific. In the project folder, there is an folder images, and I want to add one of these to a react component. The idea is to load the image dynamically, using a call to the SQL DB to create the full path

My only difference between my current work space and the video, is I don't have separate projects for the react app and Visual studio Web API. I used instead the "ASP.Net Core with React.JS" template I mention before.

I follow the tutorial and I add this code to the program.cs file:

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

And even did a extra config as well and in the setupProxy.js file, I add the images path to the context:

const context =  [
    "/api/Participants",
    "/api/Questions",
    "/Images"
];

module.exports = function(app) {
  const appProxy = createProxyMiddleware(context, {
    target: target,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  });

  app.use(appProxy);
};

But I'm still having issues when I try to load the image, this is how it looks like: Web Application

And in the network tab in the DevTools I have this as an Status: Dev Tools network tab

Any ideas of what could be the problem. Or what step I'm missing

Best Regards

CodePudding user response：

All after make my search this is the solution I found. Using the documentation for the http-proxy-middleware, I found in this link:

https://www.npmjs.com/package/http-proxy-middleware

I found the answer for configure the proxy correctly for allow static files.

the program.cs file in .net 6 was correct and these were necessary for allow access the image folder:

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

The lines I had to modify in the proxy was the context values. Noted I had to add the wild card "**" for allow all strings in the context, because you cannot combine string and wildcards. At the end the setupProxy.js :

 const context =["/api/Participants/**","/api/Questions/**","/images/**"];
 module.exports = function(app) {
 const appProxy = createProxyMiddleware(context,{
     target: target,secure: false,headers: {
         Connection: 'Keep-Alive'
     }
 });
 app.use(appProxy);
 };

As you can notice the wild card "*" for all the string path in the context array. Beside you can use this kind of wild card for allow an especific extension, like .png:

"/images/* *.png"