ASP.NET MVC编辑视图中分部视图无法回显已存储图片问题求助

问题根因 #

你复用的分部视图中，img标签的src属性默认为空，新增场景下是用户上传文件后通过JavaScript动态赋值base64地址实现图片预览，编辑场景下没有主动给img的src赋值，因此哪怕Model.Attachment存在数据也不会自动显示。

解决方案 #

提供两种可直接落地的方案，按需选择即可：

方案1：复用现有RetrieveImageG接口加载图片

修改分部视图中的img标签代码，判断当前条目已存在数据库Id（即编辑场景的已有数据）时，主动调用图片获取接口赋值src：

<img id="Img@(Model.TempID.ToString())" 
     src="@(Model.Id > 0 ? Url.Action("RetrieveImageG", "替换为你该方法所在的控制器名称", new { id = Model.Id }) : string.Empty)" 
     alt="附件预览" width="100" height="100" class="ml-1" />

方案2：直接转Base64内联加载（更适合小体积图片）

无需额外发起HTTP请求，渲染视图时直接把字节数组转成base64地址赋值给src：

<img id="Img@(Model.TempID.ToString())" 
     src="@(Model.Attachment != null ? $"data:image/jpg;base64,{Convert.ToBase64String(Model.Attachment)}" : string.Empty)" 
     alt="附件预览" width="100" height="100" class="ml-1" />

优化建议 #

你现有RetrieveImageG方法中无数据时直接返回null，会导致浏览器控制台报404错误，可优化为返回默认占位图或空结果：

public ActionResult RetrieveImageG(int id)
{
    var cover = db.GeneralItms.Where(x => x.Id == id).Select(x => x.Attachment).FirstOrDefault();
    if (cover != null)
    {
        return File(cover, "image/jpg");
    }
    // 可选返回默认占位图，或直接return EmptyResult();
    return File("~/Content/default-placeholder.png", "image/png");
}

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