.NET Core产品图片上传后前端无法显示问题求助

问题分析 #

从代码来看，图片无法显示的核心原因是路径格式不匹配以及部分逻辑疏漏：

1. 后端存储的ImageURL使用了Windows系统的反斜杠（\），但Web URL要求使用正斜杠（/），导致浏览器无法正确解析路径。
2. 前端img标签的src拼接重复添加了根路径斜杠，生成无效URL。
3. Upsert方法未区分新增/更新场景，编辑时可能导致数据异常，间接影响图片路径读取。

具体修复步骤 #

1. 修正后端图片路径格式 #

在ProductController.cs的POST Upsert方法中，修改ImageURL的拼接逻辑，统一使用正斜杠：

// 原代码
// productVM.Product.ImageURL = @"\images\product\" + fileName;              
// 修改为
productVM.Product.ImageURL = "/images/product/" + fileName;

2. 修复前端图片路径引用 #

在Upsert.cshtml中，去掉src中多余的根路径斜杠，直接使用模型中的ImageURL：

<!-- 原代码 -->
<!-- <img src="/@Model.Product.ImageURL" ... /> -->
<!-- 修改为 -->
<img src="@Model.Product.ImageURL" width="100%" style="border-radius:5px; border:1px solid #bbb9b9" />

3. 完善Upsert的新增/更新逻辑 #

当前代码无论新增还是编辑都调用Add方法，会导致编辑时重复插入数据，需区分处理：

// 原代码
// _unitOfWork.Product.Add(productVM.Product);
// 修改为
if (productVM.Product.Id == 0)
{
    _unitOfWork.Product.Add(productVM.Product);
}
else
{
    _unitOfWork.Product.Update(productVM.Product);
}

4. 确保上传目录存在（可选但推荐） #

在创建文件流前，检查并创建目标目录，避免因目录不存在导致上传失败：

string productPath = Path.Combine(wwwRootPath, @"images\product");
// 添加目录检查逻辑
if (!Directory.Exists(productPath))
{
    Directory.CreateDirectory(productPath);
}
using (var fileStream = new FileStream(Path.Combine(productPath, fileName),FileMode.Create))
{
    file.CopyTo(fileStream);
}

验证步骤 #

1. 重新运行项目，上传一张产品图片，确认图片已保存到wwwroot/images/product目录下。
2. 进入Upsert编辑页面，查看浏览器开发者工具中的img标签src属性，确认路径为/images/product/[文件名]格式。
3. 确认图片正常显示。

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