如何讓byte []顯示為視圖上div的背景圖像（C＃，ASP.NET，MVC）

Question

我正在使用MVC框架在C＃和ASP.Net中構建Web應用程序。 我的應用程序在我的本地桌面上運行（現在）。 該應用程序有一個SQL后端存儲我的所有數據。 我能夠通過許多存儲過程成功地從SQL db中提取數據。 數據能夠成功地從存儲過程一直傳輸到我從控制器查看的視圖。

傳輸到視圖的部分數據是來自存儲在db中的圖像的byte []（數據類型為VARBINARY（MAX））。 簡而言之，我試圖從這個byte []獲取數據，以顯示為div中的背景圖像。 此div在Bootstrap輪播中充當單個圖像。

最初，我有以下作為我的控制器：

public ActionResult Dashboard()
        {            
            DashboardViewModelHolder holder = new DashboardViewModelHolder(); 
            DiscoveryService discoveryService = new DiscoveryService(); 
            holder.national_Elected_Officials = new List<National_Elected_Officials_Model>(); 
            National_Elected_Officials_Model n = new National_Elected_Officials_Model();                   
            foreach (List<object> official in discoveryService.retrieve_National_Elected_Officials())
            {                
                for(int i = 0; i <= official.Count; i++)
                {                    
                    int id = int.Parse(official.ElementAt(0).ToString()); 
                    string fname = official.ElementAt(1).ToString();
                    string lname = official.ElementAt(2).ToString();
                    byte[] pictureByteArray = (byte[])official.ElementAt(3);
                    string position = official.ElementAt(4).ToString();
                    string party = official.ElementAt(5).ToString();
                    string bio = official.ElementAt(6).ToString();
                    int yearsOfService = int.Parse(official.ElementAt(7).ToString());
                    int terms = int.Parse(official.ElementAt(8).ToString());
                    string branch = official.ElementAt(9).ToString();                   

                    Image picture = image_Adapter.byteArrayToImage(pictureByteArray);                              

                    n.ElectedOfficialID = id;
                    n.FirstName = fname;
                    n.LastName = lname;
                    n.Picture = picture;
                    n.Position = position;
                    n.Party = party;
                    n.Bio = bio;
                    n.YearsOfService = yearsOfService;
                    n.Terms = terms;
                    n.Branch = branch; 
                }
                holder.national_Elected_Officials.Add(n);                
            }
            return View(holder);
        }

我的思維過程就是我會在我的視圖中調用n.Picture，它會渲染圖片。 經過幾次嘗試和教程之后，我將n.Picture作為byte []並在其自己的ActionResult方法中進行處理，如下所示：

public FileContentResult Image(byte[] pictureByteArray)
        {            
            return new FileContentResult(pictureByteArray, "image/jpeg");
        }

我在以下視圖中將此稱為：

<div class="fill" style="background-image:src(@Url.Action("Image", electedOfficial.Picture))"></div>

electOfficial是對控制器中設置的模型的引用（n.Picture）。

有什么東西我錯過了嗎？

編輯1

我忘了添加，當我調試並逐步執行代碼時，div返回null。 這是因為調試時不會調用帶有div的行。 如果我將它設置為Url.Action，程序實際上會在到達線之前進入控制器。 如果我做Html.Action，程序將跳過該行，然后轉到控制器。 兩者都將返回null作為結果，這會在控制器端返回錯誤，因為不允許空值。

編輯2我嘗試將div標簽更改為以下內容：

<div class="fill" style="background-image:src(@{Html.Action("Image", electedOfficial.Picture);})"></div>

通過在調試器中放置{}實際上會在我單步執行時解析該行。 現在，問題是控制器沒有從electOfficial.Picture接收傳遞給它的值。 要確認，此變量確實在視圖中保存了正確的值。

Answer 1

如果模型中有完整的byte[] ，則可以將數據直接放入視圖中：

<div style="background:url( data:image/jpeg;base64,@Convert.ToBase64String(electedOfficial.Picture) )"></div>

這將無需單獨的控制器即可返回FileContentResult ，但由於用戶將下載所有圖像以及頁面HTML，因此初始頁面加載時間較長。

如果您想使用Controller端點，那么圖像可以作為src屬性中的URL引用，並在HTML呈現后下載，那么您就不會太遠。 讓控制器接受ElectedOfficialID並ElectedOfficialID返回FileContentResult會更好。

  public FileContentResult Image(int electedOfficialId)
  {            
      byte[] picture = GetPicture(electedOfficialId);
      return new FileContentResult(picture, "image/jpeg");
  }

Answer 2

這樣做的簡單方法是將圖像編碼為base64字符串，並將新的字符串屬性（例如PictureAsString添加到模型而不是具有Picture

調節器

n.PictureAsString =  Convert.ToBase64String(pictureByteArray)

視圖

<div style="background:url(data:image/jpeg;base64,@electedOfficial.PictureAsString )" ></div>

Answer 3

使用處理程序（ASHX）。 並在src中調用處理程序url。

public class MyHandler : IHttpHandler
  {
   public void ProcessRequest(HttpContext context)
   {
      //Get Id from somewhere

      //Get binary data

      context.Response.ContentType = "application/octet-stream";
      context.Response.BinaryWrite(bytes);
   }
 }

Answer 4

您可以使用以下方式將字節數組轉換為圖片：

1. 將您的字節數組轉換為base64字符串。
2. 在<img>標簽中顯示。

這是代碼：

@{
    var base64 = Convert.ToBase64String(Model.ByteArray);
    var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
}

<img src="@imgSrc" />