路径正确时ASP.NET应用HTML页面无法显示背景图片报404错误

问题核心原因 #

ASP.NET 默认仅将项目根目录下的wwwroot文件夹作为静态资源的对外提供目录，存放在Views目录下的文件默认受保护，不会直接对外暴露，因此直接引用Views目录下的图片会返回404错误。

推荐解决方案（符合官方约定） #

• 在项目根目录的wwwroot文件夹中新建images子目录，将Background.jpg移动到该目录下
• 修改cshtml中的图片引用代码，使用ASP.NET内置的根路径占位符~解析资源路径：

<img src="~/images/Background.jpg" alt="Sample Photo" />

• 确认项目启动配置中已启用静态文件中间件：.NET 6及以上版本的Program.cs文件中，需存在app.UseStaticFiles();配置，且该行配置要放在路由、认证中间件之前。

特殊场景解决方案（非要将图片放在Views目录下时使用，不推荐） #

如果有特殊需求必须将图片放在Views/Home/images目录下，可以通过配置额外的静态文件提供器实现访问：

• 在Program.cs中添加如下配置：

using Microsoft.Extensions.FileProviders;
using System.IO;

// 原有配置...
app.UseStaticFiles(); // 保留默认的wwwroot静态文件配置

// 新增Views下的静态文件映射
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.ContentRootPath, "Views", "Home", "images")),
    RequestPath = "/images"
});

• 配置完成后原来的src="images/Background.jpg"引用即可正常生效。

通用排查点 #

• 检查文件名和路径的大小写是否完全一致，部署到Linux环境时大小写敏感，拼写不一致会导致404
• 右键点击项目中的图片文件，选择「属性」，确认「复制到输出目录」选项设置为如果较新则复制，避免编译后图片文件没有被同步到运行目录。

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