如何在CSHTML中访问项目根目录及Bin文件夹内的图片

核心原因 #

ASP.NET Core 默认仅将 wwwroot 目录作为静态文件根目录，项目根目录下的文件不会被Web服务器直接暴露访问，这就是图片放根目录时出现404错误的根本原因。另外，Bin目录是编译输出目录，每次重新编译都会被覆盖，不能用来存放静态资源。

解决方案 #

方案1：配置自定义静态文件目录（推荐） #

在 Program.cs 中添加额外的静态文件映射规则，让服务器能识别项目根目录下的图片文件夹：

var builder = WebApplication.CreateBuilder(args);

// 其他服务配置代码...

var app = builder.Build();

// 添加自定义静态文件目录映射
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "image")), // 指向项目根目录下的image文件夹
    RequestPath = "/image" // 对应URL中的路径前缀
});

// 保留默认的wwwroot静态文件支持
app.UseStaticFiles();

// 其他中间件配置（路由、授权等）...

app.Run();

调整ViewModel代码，直接使用数据库中的原始路径即可：

var viewModel = new BlogPostEditViewModel
{
   ImageURL = Url.Content(blogPost.Image), // 直接用数据库里的/image/xxx.webp路径
};

视图代码保持不变：

<img src="@Url.Content(Model.ImageURL)" class="img-fluid">

方案2：迁移文件到wwwroot目录（更简单） #

直接把项目根目录下的image文件夹移动到wwwroot目录下，这样无需修改任何配置，沿用你原来的代码逻辑就能正常访问图片。

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