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

Question

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

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 ???中显示

Answer 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 })" />

Answer 2

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