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

Question

我正在使用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或更多）。将它们存储在数据库中并按原样检索它们。

现在，我想确保这是在剃刀视图中处理这些文件的最佳方法，因为可能一次显示很多图像。 它会影响渲染速度吗？ 数据库将具有哪些“权重”？ 有更好的做事方法吗？

Answer 1

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")
    }
  }  
}

另外，请考虑使用异步。

Answer 2

投放图片：

您的新控制器操作：

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"/>