How to display database image (bytes[]) in mvc WebGrid

Question

I'm trying to display a byte[] image from database in a .NET MVC WebGrid Column. I`m doing the following steps

(EF Model - Articulos)

[Key]
    public int id_Art { get; set; }

    public int id_Pro { get; set; }

    [StringLength(1)]
    public string tipo_Pro { get; set; }

    [Required]
    [StringLength(50)]
    public string nombre_Pro { get; set; }

    [Required]
    [StringLength(100)]
    public string descripcion_Pro { get; set; }

    public byte[] imagen_Pro { get; set; }

    [Required]
    public decimal? precio_Pro { get; set; }

    public int? estatus_Pro { get; set; }

(Controller)

public List<articulos> cargarArticulos(string search, string sort, string sortdir, int skip, int pageSize, out int totalRecord)
    {
        using (DbModel db = new DbModel())
        {
            var v = (from a in db.articulos

                     where
                        a.tipo_Pro.Contains(search) ||
                        a.nombre_Pro.Contains(search) ||
                        a.descripcion_Pro.Contains(search)
                     select a
                     );
            totalRecord = v.Count();
            v = v.OrderBy(sort + " " + sortdir);
            if (pageSize > 0)
            {
                v = v.Skip(skip).Take(pageSize);
            }
            return v.ToList();
        }
    }

(View)

<div>
            @grid.Table(
                    tableStyle: "table table-responsive table-bordered",
                    headerStyle: "webgrid-header",
                    footerStyle: "webgrid-footer",
                    alternatingRowStyle: "webgrid-alternating-row",
                    rowStyle: "webgrid-row-style",
                    columns: grid.Columns(
                        grid.Column(columnName: "imagen_Pro", header: "IMAGEN", format: ),
                        grid.Column(columnName: "tipo_Pro", header: "TIPO"),
                        grid.Column(columnName: "nombre_Pro", header: "NOMBRE"),
                        grid.Column(columnName: "descripcion_Pro", header: "DESCRIPCION"),
                        grid.Column(columnName: "precio_Pro", header: "PRECIO"),
                        grid.Column(header: "⇨", format: (item) => Html.ActionLink("Ver", "Ver", new { }))
    )
)

Everything else works just fine, i'm succesfully retrieving the list from the controller, and it displays into the Webgrid, the only problem is to display the byte[] image stored in my database, i don´t know how to convert it to base64 before to display in the webgrid or simply adding the righ format in the column. I've been working on this for hours, please help.

grid.Column(columnName: "imagen_Pro", header: "IMAGEN", format: ),

Answer 1

Here's an approach for converting the byte array to Base64 and embedding the Base64 string in an img tag in the grid. You should be able to add a static method to your controller like this:

public static String ConvertByteArrayToBase64(int id)
{
    using (var db = new DBModel())
    {
        return Convert.ToBase64String(db.Articulos.Where(c => c.id_Art == id).First().imagen_Pro);
    }
}

Then add the column like this:

columns: grid.Columns
(
    grid.Column(header: "IMAGEN", format: @<img src="data:image/jpeg;base64,@YourController.ConvertByteArrayToBase64(@item.id_Art)" alt="">))
)

If it's a png or a gif, replace the image/jpeg with image/png or image/gif respectively.