如何将二进制数据转换为图像并在 Div Tag 或 img Tag 中显示？答案

【问题标题】：how to convert binary data to image and display in Div Tag or img Tag?如何将二进制数据转换为图像并在 Div Tag 或 img Tag 中显示？
【发布时间】：2015-05-19 07:32:22
【问题描述】：

我正在将我的图像转换为二进制数据并以二进制格式存储：

byte[] bytes = System.IO.File.ReadAllBytes(@"F:\Image\Img1.jpg");

我存储图片的数据库字段是：Varbinary(Max)

现在我正在从我的数据库中读取这个二进制数据并且我正在获取二进制数据。

我想在这个 Div 标签中显示图像。

这是我的观点：

 <div class="Image-ad"></div>

我的班级：

 public class ImageAdd   
 {
        public Guid ImageAddId { get; set; }
        public byte[] Image { get; set; }
 }

我的控制器：

public ActionResult Index()
{
   var data=db.ImageAdd.ToList();    
   return View(db);
}

如何将此二进制数据转换为图像并显示在Div Tag中？？？

【问题讨论】：

Bytearray to image conversion 的可能重复项
@lloydm: 但这不一样，因为我也想在我的 div 标签中显示
为什么不能使用img标签？你可以用div包裹img标签。
@ramiramilu：我接受你的建议，我愿意考虑你所说的。

标签： c# asp.net-mvc image blob

【解决方案1】：

两种选择：

1 : 将其添加到图像 div

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

你就完成了！

2：另一种方法是在控制器中添加一个简单的方法，并在视图中调用它来显示图像标签。将此方法添加到您的控制器：

public ActionResult GetImage(byte[] data) 
{
  MemoryStream ms = new MemoryStream(data)
  return File(ms.ToArray(), "image/png");
}

并在视图中将此行添加到图像 div：

<img src="@Url.Action("GetImage", "MyController", new { data = Model.Image })" />

【讨论】：

我不希望这是一个单独的方法
@MariaPithia 为什么不呢？此方法会将二进制数据转换为图像以正确显示在您的视图中。不喜欢就用第一种吧。
此方法将独立调用 no 因为我的主视图将被加载或将在任何点击事件上调用？
请测试一下，这个方法会在页面加载时渲染图片。
此控制器方法未在我的页面加载时调用

【解决方案2】：

您还可以使用画布标签来加载其中的图像并以这种方式呈现，我们这样做是为了在最近的项目中预览上传的图像。

【讨论】：