Asp.Net Core 3.1如何从目录读取图片并在Razor视图中正常展示

问题根源 #

你的代码问题在于控制器读取的是服务器本地物理路径（比如Windows下的C:\项目路径\wwwroot\site\img\banner\test.jpg），浏览器无法直接访问服务器本地文件系统路径，需要转换为站点可访问的URL相对路径。

1. 修改控制器代码，将物理路径转换为Web相对路径 #

var bannerDir = Path.Combine(_hostingEnv.WebRootPath, @"site\img\banner\");
string[] filePaths = Directory.GetFiles(bannerDir);
List<string> webAccessPaths = new List<string>();
foreach (var filePath in filePaths)
{
    // 剔除物理根路径部分，将Windows路径分隔符替换为Web标准正斜杠
    var relativePath = filePath.Replace(_hostingEnv.WebRootPath, "").Replace("\\", "/");
    webAccessPaths.Add(relativePath);
}
ViewBag.ListImgMainDefalt = webAccessPaths;

2. 修改视图代码，补全根路径标识 #

foreach (var item in ViewBag.ListImgMainDefalt)
{
    <tr>                               
        <td>
            <!-- ~为ASP.NET Core内置站点根路径标识，兼容子站点部署场景 -->
            <img src="~@item" alt="banner图片" />
        </td>
    </tr>
}

额外检查项 #

• 确认Program.cs（或Startup.cs）中已启用静态文件中间件，默认配置包含app.UseStaticFiles()，无特殊需求不要删除该行
• 确认wwwroot/site/img/banner目录及目录下的图片文件权限正常，部署到Linux环境时注意路径、文件名大小写匹配

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