Display an image contained in a byte[] with ASP.Net MVC3

You can create a controller action method that returns an image as a FileContentResult:

public FileContentResult Display(string id) {
   byte[] byteArray = GetImageFromDB(id);
   return new FileContentResult(byteArray, "image/jpeg");
}

Then you can create an ActionLink to the action method in the view using the image id from the model.


It depends on how big the image is. If it is small, you could write something to base-64 encode it and embed it in the html, like any of these.

For a concrete example from here:

<img src="data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPbWLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVrApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KTkpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxMAF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=" alt="British Blog Directory" width="80" height="15">

If the image is of any appreciable size, you may want instead to write a route that allows lookup via some key to the image, i.e. a route like /images/{id} - in that route you fetch the image binary and use return File(bytes, contentType), additionally setting caching headers (and remember to re-check any necessary security). In your html you would just have an

<img src="/images/@imageId" ... />

(using razor syntax, but similar for aspx).

The separate route approach requires an additional hop to the server, but allows caching at the client (the inline base-64 approach puts the data on every request).


If you already happen to have the image loaded in your model as a byte[] array you can do this as @Marc Gravell mentions in his answer:

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

This greatly simplifies the whole process and you won't need to have a specific FileContentResult action method and hit the database again (see @Dmitry S's answer) just to fetch that byte[] array with your image/photo since you already have it loaded in your model.


Sounds like you'd need a new action that gets the byte array (from a database?) and returns the image via the File method....

Then generate an anchor that points to that action, that way the image can be loaded while the page is loading, speeding up the display.


Look at WebImage class.

http://msdn.microsoft.com/en-us/library/system.web.helpers.webimage(v=vs.99).aspx


Comments

  1. Giuliani

    • 2017/7/11

    You can create a controller action method that returns an image as a FileContentResult: public FileContentResult Display(string id) { byte[] 

  2. Kelvin

    • 2015/10/24

    public FileContentResult Display(string id) { byte[] byteArray = GetImageFromDB(id); return new FileContentResult(byteArray, "image/jpeg"); } Then you can create an ActionLink to the action method in the view using the image id from the model.

  3. Reid

    • 2015/7/11

    I've a view with a strong type. This strong type has a field consisting of a byte[], this array contains a picture. Is it possible to display this image 

  4. Armando

    • 2017/7/26

    ASP.NET Forums / General ASP.NET / MVC / How to display byte[] image in view How to display byte[] image in view [Answered] RSS 4 replies

  5. Nguyen

    • 2015/3/19

    ASP.Net MVC: How to display a byte array image from model. Solution: Something like this may work @{ var base64 = Convert.ToBase64String(Model.

  6. Ari

    • 2015/10/8

    Implementation : Now we will see the implementation of Asp.Net MVC Display image from byte array using C#.Net and VB.Net. Open visual studio and create a new mvc project. Once the project is loaded right click on controllers folder and add new controller. Create Images folder in your project and add a sample image.

  7. Pedro

    • 2017/4/16

    I've stored an image as a byte array, and now I need to display it back from a byte array.So I have an tag, Asp.net MVC3 image thumbnail resize ideas.

  8. Gregory

    • 2017/5/10

    ASP.Net SQL Server MVC. Here Mudassar Ahmed Khan has explained with an example, how to display Byte Array as Image in ASP.Net MVC Razor. The images stored as Binary data will be fetched as BYTE Array and then the BYTE Array will be converted to BASE64 string and then displayed in View in ASP.Net MVC 5 Razor. Download.

  9. Cairo

    • 2019/9/1

    I added a byte[] field that contains an image thumbnail that I am (both methods found here), however I already have the byte array ready 

  10. Ephraim

    • 2016/6/5

    Expand. In this tutorial, I am going to explain how to display image from a byte array in ASP.NET MVC using C# .NET and VB.NET. Open Visual Studio and create a new MVC project. Once the project is loaded, right-click on Controllers folder and add a new Controller. Create Images folder in your project and add a sample image.

  11. Antonio

    • 2015/9/14

    In this tutorial, I am going to explain how to display image from a byte array in ASP.NET MVC using C# .NET and VB.NET.

  12. Manuel

    • 2021/2/9

    Some time ago, I wrote a custom control for ASP.NET that could display an image directly from the database without a file-based image source. Because of the way that ASP.NET MVC works, it is not feasible to use this technique. However, now that modern browsers all support the "data" protocol for displaying images, there is an easy alternative.

  13. Richardson

    • 2019/12/30

    The controller will look up topbanner.png and send that image directly back to the client. For byte[] arrays where you want the file to download 

  14. Lee

    • 2015/2/12

    Step 1: Open VS 2010 and create a new ASP.NET MVC 3 Internet application, name it as ‘MVC3_Displaying_Image’. Steo 2: On the Model folder, right click and add a new class file, name it as ‘ModelClasses.cs’. In this file, add the following classes for specifying ImageTable data table mapping and data access class as shown below:

  15. Koroveshi

    • 2019/11/19

    Handling Image Data in the AdminController Class [HttpPost] public We are going to implement this so that we can display images contained in the 

  16. Ortiz

    • 2017/10/8

    As we can see, Pic column is mapped to byte[] array. Now we need to deal with converting image data to byte[] and backward.

Comments are closed.

Recent Posts