2016-01-06 31 views
0

圖像的圖像與轉換數據庫檢索字節數組在剃刀視圖MVC

src="data:image;base64,YmxvYjpodHRwJTNBLy9sb2NhbGhvc3QlM0ExNDE0MS8wMzI1ZTA3Mi1iOTA5LTQ0YjItOTVlNS1iYzc4ZmJhZTZhMzI=" attribute value isn't displayed 
with database table that has just one record with id=1 

剃刀

<img id="BlobPic" src="data:image;base64,@System.Convert.ToBase64String(Model.Logoo)" style="max-width:90%;" /> 

Action方法

public FileContentResult getImg(int id) 
     { 
      BladiaInfoViewModel Bladia_Logo = rep.getByID(Convert.ToDecimal(1)); 
      byte[] byteArray = Bladia_Logo.Logoo; 
      return new FileContentResult(Bladia_Logo.Logoo, "image/jpeg"); 
     } 

jQuery的

$(document).ready(function() { 
     $.ajax({ 
      url: '@Url.Action("getImg")', 
       data: { 'id': "1" }, 
       type: "POST", 
       cache: false, 
       success: function (data) { 
        //document.getElementById("BlobPic").src = "data:image/png;base64," + data.Logoo; 
        document.getElementById("Logo").setAttribute("src",'@Url.Action("getImg", "BaldiaInfo", 
        new { id = Model.Logoo})'); 

       }, 
       error: function() { 
        alert("try again"); 
       } 
      }); 
      //---- 
     }); 

回答

1

如果你返回一個FileContentResult那麼它看起來像你真的這過於複雜。想必你有一個頁面在其中填充該頁面的模型包括這一動作使用的標識符,右?:

public FileContentResult getImg(int id) 

如果是這樣,那麼你就不需要這一切的Base64編碼的Ajax或數據的URI或類似的東西。所有你需要做的就是引用帶有ID的URL。事情是這樣的:

<img src="@Url.Action("getImg", "BaldiaInfo", 
       new { id = Model.Logoo})" /> 

這將創建URL爲行動:

<img src="/BaldiaInfo/getImg/123" /> 

而且,由於該操作返回的圖像文件時,瀏覽器會得到它預計在img src,圖像到底是什麼。


相反,如果你的頁面的瀏覽模式不包含ID而是包含實際圖像數據那麼你並不需要一個單獨的行動獲取圖像的。因爲你已經擁有了它。在這種情況下,你可以在模型中直接使用Base64編碼的URI:

<img src="data:image;base64,@System.Convert.ToBase64String(Model.Logoo)" /> 

沒有JavaScript的,具有FileContentResult沒有單獨行動,沒有這一點。


基本上,你要麼有您使用引用其他動作或ID你有用於構建一個數據URI中的數據。看起來你正試圖同時做到這一點。

+0

首先感謝你的回答, 第二件事是我有一個關於一個機構的元數據的表,圖像只是一個表內一個單元格中的一個字段,只有一行,其數據類型是Blob 所以我只需要顯示從數據庫返回的圖像 – Zain

+0

@ Asp.NetDeveloper:如果圖像數據包含在填充頁面的原始數據中,則此答案的後半部分適用。自從視圖已經擁有圖像以後,將不需要單獨的操作來獲取圖像。如您所示,您只需將其包含在數據URI中即可。 – David

+0

先生@大衛我討厭你,但你變得近了,我用這個解決方案,但它不起作用。當我通過檢查元素src =「blob:http%3A // localhost%3A14141/b47fe875-a7a2-4b17-99cd-71274655082b」 瀏覽並選擇客戶端的圖像並保存後,它返回此src = 「數據:圖像; BASE64,YmxvYjpodHRwJTNBLy9sb2NhbGhvc3QlM0ExNDE0MS8yMTUyNDQzNC1jYjMzLTQ1ZTctOTQ0My0wYmY3ZjVlYTQyODM =」 和字節數組返回此使用斷點(經由鏈路web圖片) http://postimg.org/image/78prx7zln/ – Zain