.NET 6/Core AngularJS项目静态文件、图片加载返回404问题

按以下步骤逐一排查即可解决静态资源404问题：

• 首先检查中间件执行顺序
  .NET Core的中间件是按代码书写顺序依次执行的，app.UseStaticFiles()必须放在UseRouting、UseAuthorization、MapFallbackToFile等中间件之前，否则静态文件请求会被后续中间件拦截。正确的最小配置顺序参考：

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews();
var app = builder.Build();

app.UseHttpsRedirection();
// 静态文件中间件必须靠前放置
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller}/{action=Index}/{id?}");
// SPA回退规则必须放在静态文件中间件之后
app.MapFallbackToFile("index.html");

app.Run();

• 区分开发/生产环境的静态资源读取逻辑
  如果是用Visual Studio官方模板创建的.NET+Angular项目，开发阶段默认启动Angular Dev Server提供前端资源，不会读取.NET项目的wwwroot目录，你把图片放在wwwroot下开发时自然访问不到。
  • 开发环境：将图片等静态资源放到Angular项目的src/assets/imgs目录下，确认angular.json中已配置assets路径：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ],
  

  对应引用路径改为/assets/imgs/bg11.webp、/assets/imgs/1.gif即可正常访问。
  • 生产环境：发布时Angular构建输出的文件会自动拷贝到wwwroot目录，放在assets下的资源也会同步到发布目录的wwwroot下，不需要手动维护wwwroot的文件。
• 显式配置静态文件MIME类型
  不要直接开启ServeUnknownFileTypes放行所有未知类型，存在安全风险，显式补充缺失的文件类型映射即可：

var contentTypeProvider = new FileExtensionContentTypeProvider();
// 补充webp格式MIME映射，部分.NET版本默认不带该配置
contentTypeProvider.Mappings[".webp"] = "image/webp";
// 保险起见可显式声明gif映射
contentTypeProvider.Mappings[".gif"] = "image/gif";

app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = contentTypeProvider
});

• 最后做文件存在性校验
  打开项目编译输出目录（bin/Debug/net6.0/）或发布输出目录，检查wwwroot/imgs路径下是否确实存在对应图片文件。如果文件不存在，回到VS确认文件已被包含在项目中，且“复制到输出目录”属性设置正确。

内容的提问来源于stack exchange，提问作者Leandro Bardelli