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