在 ASP.NET Core MVC 项目中,静态资源(如图片、CSS、JavaScript)必须存放在 `wwwroot` 文件夹下,这是框架默认的静态文件根目录。你之前使用的绝对路径 `
` 是服务器本地路径,浏览器无法直接访问,因此图片必然无法加载。
要正确添加并显示图片,请按以下步骤操作:
将图片放入 wwwroot 目录结构中
在解决方案资源管理器中,找到或创建 wwwroot/images/ 子文件夹(推荐按类型组织),然后将 cars.jpg 拖入该文件夹。最终路径应为:
YourProject/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();
⚠️ 常见错误提醒:
- ❌ 不要使用 file:// 协议或 C:\... 绝对路径;
- ❌ 不要将图片放在 Controllers、Models 或 Views 等非 wwwroot 文件夹中;
- ❌ 不要在 src 中硬编码 http://localhost:5000/images/... —— 这会破坏部署灵活性。
✅ 最佳实践建议:
- 图片统一存于 wwwroot/images/,命名使用小写字母与短横线(如 hero-banner.jpg);
- 在 Razor 视图中优先使用
防止客户端缓存旧图; - 若需动态路径,可结合 IWebHostEnvironment.WebRootPath 在后台获取物理路径(仅限服务端逻辑,不可用于前端 src)。
完成上述配置后,刷新页面,图片即可正常显示。










