how to render image in view. value of image = byte[]. asp.net mvc

Question

i have image value in database of type "image". in view saved under type byte[] i want to show it as image in my asp.net mvc view. the best its just as image. value if image is saved under Model.ImageData.

i tried to solve it like this:

<img height="450px" width="330px" src="<%= historyItem.ImageData %>" alt="image" />

but it doesnt work. how to do that?

Darin Dimitrov · Accepted Answer · 2011-03-23 18:21:16Z

6

The problem with your approach is that you have included the image data as part of your view model but the <img> tag expects an URL in the src attribute. Some browsers support base64 embedded images to be put inside the HTML but I would recommend you to avoid this approach as the volume of your markup might grow.

So you will need a controller action which serves the image:

public ActionResult Image()
{
    byte[] imageData = ...
    return File(imageData, "image/png");
}

and then point the src attribute of the img tag to this controller action:

<img height="450px" width="330px" src="<%= Url.Action("Image") %>" alt="image" />

edited Mar 23, 2011 at 18:21

answered Mar 23, 2011 at 18:12

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Darin Dimitrov Over a year ago

@Daniel A. White, haven't I? That's the second argument of the File method.

Daniel A. White Over a year ago

Well imageData might represent a JPG or GIF.

Darin Dimitrov Over a year ago

@Daniel A. White, sure, thought this was obvious.

Serge Wautier · Accepted Answer · 2011-03-23 18:13:09Z

0

There may be a solution with embedded images. But aside from this, you need to create another action to download the image:

<img height="450px" width="330px" 
     src="<%: Url.Action("Image", "Controller", new { id=Model.ImageId }) %>"
     alt="image" />

In the controller class:

public FileResult Image(int id)
{
  byte[] imageData = getImageBytes(id);
  string mimeType = getMimeType(id);

  return new FileStreamResult(new System.IO.MemoryStream(imageData), mimeType );
}

answered Mar 23, 2011 at 18:13

Serge Wautier

22k13 gold badges74 silver badges114 bronze badges

Comments

user153923 · Accepted Answer · 2011-03-23 18:15:23Z

0

I'm no expert on ASP.NET. That said, can you cast it to an Image or a Bitmap?

On a WinForm or in the ASP.NET code behind, it would look something like....

Image img = historyItem.ImageData as Image;
if (img != null) {
  // Do Something
}

~Joe

answered Mar 23, 2011 at 18:15

user153923

Comments

Community · Accepted Answer · 2017-05-23 12:15:38Z

0

You'll have to create a separate action method that returns a FileResult.

There should be lots of different questions on Stackoverflow on the subject. Try something from here:
https://stackoverflow.com/search?q=fileresult+mvc+image

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Mar 23, 2011 at 18:10

ten5peed

15.9k3 gold badges62 silver badges74 bronze badges

Collectives™ on Stack Overflow

how to render image in view. value of image = byte[]. asp.net mvc

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related