图片没有在asp.net MVC View中显示

时间:2017-02-02 17:34:51

标签: c# asp.net asp.net-mvc asp.net-mvc-4

我是asp.net MVC的新手。在过去的两天里,我试图在我的SQL数据库的cshtml视图中显示一个图像。

以下是从数据库获取图像的方法:

public class ProfilePicture:Gateway
    {
        public byte[] ShowProfilePicture()
        {
            Query = "SELECT * FROM t_ProfilePicture WHERE UserId='" + 1 + "'";
            Command = new SqlCommand(Query, Connection);
            Connection.Open();
            Reader = Command.ExecuteReader();
            byte[] image = null;
                while (Reader.Read())
                {
                    image = (byte[])Reader["ProfilePictureFile"];
                }
            Reader.Close();
            Connection.Close();  
            return image;
        } 
    }

这是用于获取字节数据的HTML帮助程序代码。将其转换为base64:

@{   
    ProfilePicture aProfilePicture = new ProfilePicture();
    var image = aProfilePicture.ShowProfilePicture();
    string string64 = Convert.ToBase64String(image);
    ViewBag.profilePicture = "data:image/png;base64," + string64;    
}

这是<img>标记:

<img id="profilePicture" src="@ViewBag.profilePicture" alt="profilePicture" />

我几乎遵循所有可用的解决方案,包括this。但是还没有得到任何解决方案。

提前感谢您的任何帮助。

2 个答案:

答案 0 :(得分:0)

尝试在其周围使用Html.Raw;可能会出现一些导致问题的编码:

<img id="profilePicture" src="@Html.Raw(ViewBag.profilePicture)" alt="profilePicture" />

答案 1 :(得分:0)

即使解决方案适合您,或者您对其他实施开放,您确定这是您想要显示图像的方式吗?

通常最好不要将图像和二进制数据存储在数据库中(出于性能和成本原因),并且您也不希望在页面上嵌入图像二进制数据,因为这会增加页面加载时间,您无法使用大量内置功能进行优化(IIS缓存,浏览器缓存,压缩...)

更好的方法可能是将图像存储在磁盘和数据库中的路径上,在代码中使用&#34; src&#34;来构建HTML img元素。将路径作为URL的属性。

即使你仍然需要将图像保存在数据库中,最好还是将二进制数据保存到磁盘并从那里提供服务,而不是嵌入字节数组。

如果您想仔细阅读此选项,我可以为您提供更多信息。

------- 2月03-17日更新-------

在您的视图中,您希望构建带有指向存储图像的链接的HTML图像,无论它是通过使用指向控制器操作的链接存储在数据库中还是存储在磁盘上,如:

<img src='@Url.Action("GetProfileImage", "User", new { Model.UserName })'/>

或通过ViewModel中的链接,例如:

<img src= "@Url.Content(Model.ImagePath)" alt="Image" />

至于在数据库中存储图像路径,有很多方法。将图像存储在站点内的目录中的简单实现可能类似于accepted answer in this post

public ActionResult FileUpload(HttpPostedFileBase file)
{

    if (file != null)
    {
        Database1Entities db = new Database1Entities();
        string ImageName = System.IO.Path.GetFileName(file.FileName);
        string physicalPath =Server.MapPath("~/images/"+ ImageName);

        // save image in folder
        file.SaveAs(physicalPath);

        //save new record in database
        tblA newRecord = new tblA();
        newRecord.fname = Request.Form["fname"];
        newRecord.lname = Request.Form["lname"];
        newRecord.imageUrl = ImageName;
        db.tblAs.Add(newRecord);
        db.SaveChanges();

    }
    //Display records
    return RedirectToAction("../home/Display/");
}

对于显示器,我的建议是实现一个控制器,从数据库中检索图像路径并返回一个链接,如this post中所示:

public ActionResult Image(string id)
{
    var dir = Server.MapPath("/Images");
    var path = Path.Combine(dir, id + ".jpg"); //validate the path for security or use other means to generate the path.
    return base.File(path, "image/jpeg");
}