Convert Byte Array to image and display in Razor View

Question

I am using EF 4.1 Code First and for the sake of simplicity, let\'s say I have the following Entity class:

public class Person
{
    public          


        

Answer 1

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.

Answer 2

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.

Answer 3

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