ASP.NET MVC中数据库存储图片路径前端无法显示问题求助

问题描述 #

在ASP.NET MVC项目中，图片路径已存储至数据库及服务器Image文件夹，但前端无法正常显示图片。以下是使用Entity Framework实现图片上传及列表展示的控制器与视图代码，请求协助解决前端图片显示问题。

控制器代码 #

Create方法 #

[HttpPost]
public ActionResult Create(Personaltable p, Personal u)
{
    try
    {
        // TODO: Add insert logic here
        string filename = Path.GetFileNameWithoutExtension(u.AttachPicture.FileName);
        string extension = Path.GetExtension(u.AttachPicture.FileName);
        filename = filename + DateTime.Now.ToString("yymmssfff") + extension;
        u.ImagePath = "~/Image/" + filename;
        filename = Path.Combine(Server.MapPath("~/Image/"), filename);
        u.AttachPicture.SaveAs(filename);

        using (PersonaltableEntities entity = new PersonaltableEntities())
        {
            var t = new Personaltable()//Make Variable of Table 
            {
                AttachPicture=SaveToPhysicalLocation(u.AttachPicture),

                LastPayCertificate = SaveToPhysicalLocation(u.LastPayCertificate)
            };

            db.Personaltables.Add(t);
            db.SaveChanges();
        }

        return RedirectToAction("Index");
    }
    catch()
    {}
}

private string SaveToPhysicalLocation(HttpPostedFileBase file)
{
    if (file.ContentLength > 0)
    {
        var fileName = Path.GetFileName(file.FileName);
        var path = Path.Combine(Server.MapPath("~/App_Data"), fileName);
        file.SaveAs(path);
        return path;
    }
    return string.Empty;
}

Index方法 #

public ActionResult Index()
{      
    return View(db.Personaltables.ToList());
}

视图代码 #

@foreach (var item in Model)
{
    <tr>  <td><img src="~/Image/" width="100",height="250"/></td></td>
}

问题根源与修复方案 #

1. 核心问题点 #

• 存储路径冲突：代码先将图片保存到~/Image/目录，随后又调用SaveToPhysicalLocation把图片重复存到~/App_Data/，且数据库存入的是本地物理路径（如C:\xxx\App_Data\pic.jpg），而非网站相对路径。
• 视图地址未绑定数据：<img>标签的src固定为~/Image/，未拼接数据库中的图片文件名，无法定位具体图片。

2. 修复步骤 #

步骤1：统一存储逻辑，保存相对路径

修改Create方法，去掉重复存储逻辑，将网站相对路径存入数据库：

[HttpPost]
public ActionResult Create(Personaltable p, Personal u)
{
    try
    {
        // 处理AttachPicture
        string picName = Path.GetFileNameWithoutExtension(u.AttachPicture.FileName);
        string picExt = Path.GetExtension(u.AttachPicture.FileName);
        string newPicName = picName + DateTime.Now.ToString("yymmssfff") + picExt;
        string picRelativePath = "~/Image/" + newPicName;
        string picPhysicalPath = Path.Combine(Server.MapPath("~/Image/"), newPicName);
        u.AttachPicture.SaveAs(picPhysicalPath);

        // 处理LastPayCertificate
        string certName = Path.GetFileNameWithoutExtension(u.LastPayCertificate.FileName);
        string certExt = Path.GetExtension(u.LastPayCertificate.FileName);
        string newCertName = certName + DateTime.Now.ToString("yymmssfff") + certExt;
        string certRelativePath = "~/Image/" + newCertName;
        string certPhysicalPath = Path.Combine(Server.MapPath("~/Image/"), newCertName);
        u.LastPayCertificate.SaveAs(certPhysicalPath);

        using (PersonaltableEntities entity = new PersonaltableEntities())
        {
            var t = new Personaltable()
            {
                AttachPicture = picRelativePath,
                LastPayCertificate = certRelativePath
            };

            db.Personaltables.Add(t);
            db.SaveChanges();
        }

        return RedirectToAction("Index");
    }
    catch
    {}
}

注：删除原SaveToPhysicalLocation方法，避免路径冲突。

步骤2：修正视图图片地址绑定

修改视图代码，使用数据库中的相对路径，并通过Url.Content()转换为前端可访问路径：

@foreach (var item in Model)
{
    <tr>
        <td>
            <img src="@Url.Content(item.AttachPicture)" width="100" height="250" alt="个人图片" />
        </td>
    </tr>
}

注：原视图中多余的</td>标签已一并修正。

步骤3：检查目录权限

确认服务器~/Image/目录具备读写权限，IIS应用程序池身份可正常访问该目录，同时验证图片是否已正确保存到对应目录。

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