2016-01-06 47 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