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

Question

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

Answer 1

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"