在html视图中嵌入来自数据库的图像的最佳方法

时间:2014-09-11 13:05:50

标签: c# html asp.net-mvc database image

我正在使用byte[]符号将图像数据存储在数据库中,如下所示:

ITEM_IMAGE VARBINARY(MAX),

然后当我检索图像并显示它时,我就这样继续:

<img src="data:image/png;base64, @(Convert.ToBase64String(Model.mChildCard.NormalImage))" alt="@Model.mChildCard.mCardName" title="@Model.mChildCard.mCardName" class="nullify"/>

我这样做是因为我不能保证我们的应用程序将在它将部署的服务器上具有写访问权限,而不是将图像存储在普通文件中(并且有很多图像,谈论70k以上),我们选择将它们存储在数据库中并检索它们。

现在我想确保这是在剃刀视图中处理这些文件的最佳方式,因为可能会同时显示大量图像。它会对渲染的速度产生影响吗?数据库会有什么“重量”?有更好的办法吗?

2 个答案:

答案 0 :(得分:2)

public FileStreamResult GetDBImage(string imageId)
{
  using (var conn = GetConnection())
  {
    conn.Open();
    using (var cmd = conn.CreateCommand)
    {
      cmd.CommandText = "SELECT ITEM_IMAGE FROM ... WHERE id=@id";
      cmd.Parameters.Add("@id", imageId);
      using (var rdr = cmd.ExecuteReader())
        return File(rdr.GetStream(0), "image/png")
    }
  }  
}

另外,请考虑使用async。

答案 1 :(得分:1)

提供图片:

您的新控制器操作:

public ActionResult GetImage(string imageID)
{
    byte[] imgArray;
    //call your db and get your byte array.

    if(imgArray != null)
    {
        return File(imageArray, "image/png");
    }
    else
    {
        throw new HttpException(404);
    }

}

添加路线:

routes.MapRoute("Images", "images/{imageId}", New With {.controller = "yourImageController", .action = "GetImage")

来自您的HTML:

<img src="@Url.Action("GetImage", "YourImageController", new{ @imageId=Model.mChildCard.imageId})" alt="@Model.mChildCard.mCardName" title="@Model.mChildCard.mCardName" class="nullify"/>