Images in one of the folders not loading in Azure static web app

Question

We have a Blazor WASM application which is hosted in azure static web app. We have images in 2 folders

/images
/data_images

The images from the /images folder is loading in the web app, but the images form the /data_images is not loading and we get 404. I have copied the same images into the /data_images folder but its not loading.

I tried renaming the data_images folder name, but that also doesn't work

Here is my staticwebapp.config.json

{
"trailingSlash": "auto",
"routes": [
],
"navigationFallback": {
    "rewrite": "index.html",
    "exclude": [ "/images/*.{png,jpg,gif,svg}", "/imagess/*.{png,jpg,gif,svg}", "/data_images/*", "/css/*" ]
},
"mimeTypes": {
    ".json": "text/json",
    ".png": "image/png",
    ".svg": "image/svg+xml"
}

}

Answer 1

In your "staticwebapp.config.json," you have an "exclude" rule for "/data_images/*," which means requests to the "/data_images" folder will be excluded from navigation fallback to "index.html." Ensure that this exclusion is not preventing the images from being served. If you want to serve images from this folder, you should remove this exclusion.

Here I have Tried excluding Rule:

Added Images in index.razor page

@page "/"
<PageTitle>Index</PageTitle> 
<h1>Hello, world!</h1> 
Welcome to your new app.
<!-- Reference an image from the "/images" folder -->
<img src="/images/BrandBlazor.png" alt="BrandBlazor" />

<!-- Reference an image from the "/data_images" folder -->
<img src="/data_images/images.png" alt="images" /> 
<SurveyPrompt Title="How is Blazor working for you?" />

launchSettings.json

{
    "trailingSlash": "auto",
    "routes": [],
    "navigationFallback": {
      "rewrite": "index.html"
    },
    "mimeTypes": {
      ".json": "text/json",
      ".png": "image/png",
      ".svg": "image/svg+xml"
    }
  }

Deploy your code to static webapp Result