.NET Core 3.1 上传图片成功后前端无法显示报404错误求助

问题根因 #

1. 存储的路径格式错误：存入数据库的ImageName是服务器本地物理拼接路径，不是前端可访问的URL相对路径
2. 静态资源访问未授权：.NET Core默认仅开放wwwroot目录作为静态资源访问目录，自定义的WebRootPath目录未配置静态文件中间件时，外网无法直接访问该目录下的资源
3. 路径映射逻辑错误：Url.Content()仅能解析相对于web根目录的路径，无法识别服务器本地物理路径

解决步骤 #

1. 配置静态文件中间件(.NET Core 3.1 对应修改Startup.cs文件的Configure方法) #

如果继续使用自定义的WebRootPath目录存储图片，添加如下配置：

using Microsoft.Extensions.FileProviders;

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 原有配置保留，在app.UseRouting()之前添加以下代码
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(Directory.GetCurrentDirectory(), "WebRootPath")),
        RequestPath = "/WebRootPath"
    });
    app.UseStaticFiles(); // 保留默认wwwroot的静态文件配置
}

如果不想额外配置，直接把Imagef文件夹移到项目默认的wwwroot目录下，跳过这步配置即可。

2. 修正Controller的路径存储逻辑 #

首先在HomeController中注入IWebHostEnvironment获取项目路径：

private readonly IWebHostEnvironment _webHostEnv;
private readonly studDBContext _studDBContext;

// 修改构造函数注入
public HomeController(IWebHostEnvironment webHostEnv, studDBContext dbContext)
{
    _webHostEnv = webHostEnv;
    _studDBContext = dbContext;
}

修改Create Post方法的路径拼接逻辑，区分物理存储路径和web访问路径：

[HttpPost]
public IActionResult Create(StudentViewModel svm)
{
    if (svm.File != null)
    {
        var fileName = Path.GetFileName(svm.File.FileName);
        var createGUID = "_" + Guid.NewGuid().ToString().Substring(0, 4);
        // 存入数据库的web访问相对路径，统一用斜杠避免Windows反斜杠问题
        var webAccessPath = Path.Combine("/WebRootPath", "Imagef", createGUID + fileName).Replace("\\", "/");
        // 服务器本地物理存储路径
        var physicalSavePath = Path.Combine(Directory.GetCurrentDirectory(), "WebRootPath", "Imagef", createGUID + fileName);
                                                                          
        using (var fileSteam = new FileStream(physicalSavePath, FileMode.Create))
        {
            svm.File.CopyTo(fileSteam);
        }

        Student student = new Student();
        student.ImageDescription = fileName;
        // 存储web可访问路径而非物理路径
        student.ImageName = webAccessPath;

        _studDBContext.students.Add(student);
        _studDBContext.SaveChanges();
    }
    return View();
}

如果是把Imagef放在wwwroot下，对应修改路径拼接即可：

var webAccessPath = Path.Combine("/Imagef", createGUID + fileName).Replace("\\", "/");
var physicalSavePath = Path.Combine(_webHostEnv.WebRootPath, "Imagef", createGUID + fileName);

3. 修正前端img标签代码 #

不需要再用Url.Content包裹路径，直接使用数据库存储的路径即可：

<img src="@item.ImageName" alt="Image" style="width:50px;height:50px;" />

注意事项 #

• 确保Imagef文件夹存在，程序运行身份有该目录的读写权限
• 已有的错误历史数据需要手动修正路径格式才能正常显示

内容的提问来源于stack exchange，提问作者R.D Student