Convert Byte Array to image and display in Razor View Convert Byte Array to image and display in Razor View arrays arrays

Convert Byte Array to image and display in Razor View


There's an even easier way of doing this if you already happen to have the image loaded in your model:

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

Doing this way you do not need to go to the server again just to fetch the image byte[] from the database as you're doing.


Like this:

<img src="@Url.Action("getImg", "Person", new { id = item.Id })" alt="Person Image" />

You need Url.Action and not Html.Action because you just want to generate an url to the GetImg action. Html.Action does something entirely different.


I found that the best way to display a dynamically loaded SVG image from a Model property in a Razor MVC page is to use Html.DisplayFor(..) in combination with .ToHTMLString(). For my case, have a base 64 SVG Image+XML data string stored in the model property named Image. Here is my code:

<img src='@Html.DisplayFor(model => model.Image).ToHtmlString()' />

This seemed be the only way I was able to get the SVG image to display properly in Chrome, FireFox and IE.

Cheers