MVC : Display Image From Byte Array

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. 

  1. Open Visual Studio and create a new MVC project.
  2. Once the project is loaded, right-click on Controllers folder and add a new Controller.
  3. Create Images folder in your project and add a sample image.
  4. Now, open the DemoController and add GetImageFromByteArray action method.
  5. Within the action method, place the code given below (Below, I have given the entire Controller code).

C#.NET Code

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace DemoProject.Controllers  
  8. {  
  9.     public class DemoController : Controller  
  10.     {  
  11.         // GET: Demo/GetImageFromByteArray  
  12.         public ActionResult GetImageFromByteArray()  
  13.         {  
  14.             // Get image path  
  15.             string imgPath = Server.MapPath("~/images/self-discipline.png");  
  16.             // Convert image to byte array  
  17.             byte[] byteData = System.IO.File.ReadAllBytes(imgPath);  
  18.             //Convert byte arry to base64string   
  19.             string imreBase64Data = Convert.ToBase64String(byteData);  
  20.             string imgDataURL = string.Format("data:image/png;base64,{0}", imreBase64Data);  
  21.             //Passing image data in viewbag to view  
  22.             ViewBag.ImageData = imgDataURL;  
  23.             return View();  
  24.         }  
  25.     }  

VB.NET Code

  1. Imports System.Collections.Generic  
  2. Imports System.Linq  
  3. Imports System.Web  
  4. Imports System.Web.Mvc  
  5.   
  6. Namespace DemoProject.Controllers  
  7.     Public Class DemoController  
  8.         Inherits Controller  
  9.         ' GET: Demo/Image  
  10.         Public Function GetImageFromByteArray() As ActionResult  
  11.             ' Get image path  
  12.             Dim imgPath As String = Server.MapPath("~/images/self-discipline.png")  
  13.             ' Convert image to byte array  
  14.             Dim byteData As Byte() = System.IO.File.ReadAllBytes(imgPath)  
  15.             'Convert byte arry to base64string   
  16.             Dim imreBase64Data As String = Convert.ToBase64String(byteData)  
  17.             Dim imgDataURL As String = String.Format("data:image/png;base64,{0}", imreBase64Data)  
  18.             'Passing image data in viewbag to view  
  19.             ViewBag.ImageData = imgDataURL  
  20.             Return View()  
  21.         End Function  
  22.     End Class  
  23. End Namespace  

Now, let me explain what is there in the code.

  1. I read the image from the folder into an imgPath local variable.
  2. In the second step, I have converted the image into a byte array using ReadAllBytes method.
  3. And then, I have converted the byte array into base 64 string format using Convert.ToBase64String method.
  4. Now, I have appended data:image/png;base64 at the beginning of base64 string so that the browser knows that the src attribute value itself contains the image data.
  5. Finally, I have assigned this image data in the ViewBag and returned it to the View.

Now, add a new View to GetImageFromByteArray action method. And, add an image view. We can directly assign the image data from ViewBag to src attribute of the image tag like below.

  1. @{  
  2.     ViewBag.Title = "Asp.Net MVC Display image from byte array";  
  3. }  
  4.   
  5. <h2>Asp.Net MVC Display image from byte array</h2>  
  6. <img src="@ViewBag.ImageData">  

Output

Now, if you run the program, you can see the output of how to display the image from the byte array.

MVC

Now, if you look into the source of the page, you can see the base 64 string rendered as an image.

MVC

Conclusion

I hope you learned how to display the image f the om byte array in MVC. Please post your comments and feedback below.

Next Recommended Readings