how to convert binary data to image and display in Div Tag or img Tag?

Question

I am converting my image to binary data and storing in binary format with this:

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

My database field for storing image is: Varbinary(Max)

Now i am reading this binary data from my database and i am getting binary data.

I want to display image in this Div tag.

This is my View:

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

My Class:

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

My Controller:

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

How to convert this binary data to image and display in Div Tag???

possible duplicate of [Bytearray to image conversion](http://stackoverflow.com/questions/9173904/bytearray-to-image-conversion) — lloyd, May 19 '15 at 07:46
@lloydm:but this is different as because i want to display in my div tag too — I Love Stackoverflow, May 19 '15 at 07:48
why can't you use `img` tag? you can wrap `img` tag with `div`. — ramiramilu, May 19 '15 at 07:57
@ramiramilu:i take it your suggestion and i would like to consider as what you have said. — I Love Stackoverflow, May 19 '15 at 08:01

Iman Nemati · Accepted Answer · 2015-05-19T08:06:52.473

8

Two options:

1 : add this to image div

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

and you'r done!

2: another way is to add a simple method to your controller and call it in your view to display the image tag. add this method to your controller:

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

and in view add this line to image div:

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

edited May 19 '15 at 08:06

answered May 19 '15 at 07:48

Iman Nemati

i dont want this as a seperate method – I Love Stackoverflow May 19 '15 at 08:03
@MariaPithia whay not?? this method will convert binary data to an image to correctly display in your view. if you don't like it, just use the first way. – Iman Nemati May 19 '15 at 08:05
this method would call independently no as my main view will be loaded or would be called on any click event ? – I Love Stackoverflow May 19 '15 at 08:08
please test it, this method will render image on page load. – Iman Nemati May 19 '15 at 08:14
this controller method is not calling on my page load – I Love Stackoverflow May 19 '15 at 09:20
your approach 1 worked correctly and image is getting rendered but your i quite liked your approach 2 but problem is my controller method is not calling – I Love Stackoverflow May 19 '15 at 09:25
please try Html.RenderAction instead of Url.Action – Iman Nemati May 19 '15 at 09:41
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/78164/discussion-between-maria-pithia-and-iman-nemati). – I Love Stackoverflow May 19 '15 at 09:41

score 0 · Answer 2 · answered Apr 21 '16 at 13:48

0

You can also use a canvas tag to load the image inside it and render it that way, we did this for previewing uploaded images in a recent project.

answered Apr 21 '16 at 13:48

sed

2 Answers2