Static Files or Images doesn't load ( 404 ) using C# NET AngularJS project-CodePudding

I'm new into AngularJS project in .NET 6.0 or Core. I just put a images into a folder like wwwroot/imgs

Then images are called from a custom static css referenced in: angular.json like:

        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css",
          "src/css/main.css"
        ],

and then in main.css for example:

body {
  background: #fff9ee;
  background: url(/imgs/bg11.webp) repeat;
}

but the resource https://localhost:port/imgs/bg11.webp returns 404
The css loads fine.

Also I'm using

app.UseStaticFiles();

in Program.cs

Also I check the "Copy Always" and "Build Action: Content"

UPDATE:

Problem also in index.html with a GIF file:

 <img  src="/imgs/1.gif" alt="">

Tried with:

.UseStaticFiles(new StaticFileOptions
{
    ServeUnknownFileTypes = true,
})

neither works.

Thanks in advance for help.

CodePudding user response：

Depending on the path of your css file main.css, if it is under wwwroot folder then just remove the / before imgs/bg11.webp.

Your css should look like this

body {
  background: #fff9ee;
  background: url('imgs/bg11.webp') repeat;
}

CodePudding user response：

Finally I discover the problem. In development the project works through a reverse proxy, so we need to configure every folder in the file proxy.conf.js in order to the proxy let the project serve the static files.

For example, to add /imgs files in my case:

const PROXY_CONFIG = [
  {
    context: [
      "/weatherforecast",
      "/imgs"
   ],