使用ASP.NET Core MVC时如何正确显示图片？

出现该问题的核心原因是ASP.NET Core默认的静态文件访问规则限制：

• 默认仅允许访问wwwroot目录下的静态资源（图片、CSS、JS等），放在项目根目录的文件无法直接被外部访问
• 未启用静态文件中间件、图片路径写法错误也会导致加载失败

具体解决步骤 #

1. 启用静态文件中间件
   确认你的Program.cs（.NET 6及以上版本）中已添加静态文件中间件，且放置顺序正确：

var builder = WebApplication.CreateBuilder(args);
// 注册控制器和视图服务
builder.Services.AddControllersWithViews();
var app = builder.Build();

// 必须添加该行，启用静态资源访问，且要放在路由规则之前
app.UseStaticFiles();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();

如果是.NET 5及更早版本，需要在Startup.cs的Configure方法中添加app.UseStaticFiles();。

2. 存放图片到指定目录
   在项目根目录下找到wwwroot文件夹（如果不存在则手动新建），可以在wwwroot内新建images子目录专门存储图片，将你的myImage.jpg放入该目录，最终路径为wwwroot/images/myImage.jpg。

3. 修正视图中的图片路径
   修改img标签的src属性，使用相对站点根目录的绝对路径：

<img src="/images/myImage.jpg" height="113" width="113" border="0" />

注意路径开头的斜杠不能省略，否则浏览器会将路径解析为当前页面路由的相对路径，导致加载失败

可选方案：自定义静态文件目录 #

如果你确实需要将图片放在wwwroot以外的目录，可以修改静态文件中间件配置，添加额外的静态资源目录，该方案不推荐新手使用：

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.ContentRootPath, "你的自定义文件夹名")),
    RequestPath = "/自定义请求前缀"
});

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