如何在 ASP.NET Core MVC 项目中正确添加并显示静态图片

霞舞 2026-01-22 00:00:00 次阅读

在 ASP.NET Core MVC 项目中，静态资源（如图片、CSS、JavaScript）必须存放在 `wwwroot` 文件夹下，这是框架默认的静态文件根目录。你之前使用的绝对路径 `` 是服务器本地路径，浏览器无法直接访问，因此图片必然无法加载。

要正确添加并显示图片，请按以下步骤操作：

将图片放入 wwwroot 目录结构中
在解决方案资源管理器中，找到或创建 wwwroot/images/ 子文件夹（推荐按类型组织），然后将 cars.jpg 拖入该文件夹。最终路径应为：
Your
Project/wwwroot/images/cars.jpg
在视图中使用正确的 URL 路径
使用 ~（波浪号）表示应用根路径，并配合 asp-append-version="true" 提升缓存可靠性（可选但推荐）：
```
@@##@@
```
✅ 注意：~/ 由 ASP.NET Core 的标签助手自动解析为 /（即网站根路径），最终生成类似 /images/cars.jpg 的 URL，由 StaticFileMiddleware 正确提供服务。

确保已启用静态文件中间件（默认已启用）
检查 Program.cs 中是否包含以下代码（.NET 6+）：

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

var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles(); // ← 关键：必须启用！
app.UseRouting();
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
});
app.Run();

⚠️ 常见错误提醒：