How to display image inside web form from Byte Array with C#

Question

This is my code, all it does is clear the web page and draw the image, so the rest of the form disappears! I need to show the image inside the form.

This is my User Control to display the images:

protected void Page_Load(object sender, EventArgs e)
    {

        if (Session["ObjHoteles"] == null)
        {
            Label1.Text = "Por favor, primero seleccione un hotel para desplegar las fotos.";
        }
        else
        {
            if (!IsPostBack)
            {
                List<Byte[]> ArrayFotos = new List<Byte[]>();
                string NombreDelHotel = "";

                Hoteles Hotel1 = (Hoteles)Session["ObjHoteles"];
                NombreDelHotel = Hotel1.NombreHotel;

                ArrayFotos = Persistencia.PersistenciaFotos.FotosDeHotel(NombreDelHotel);
                Session["CantFotos"] = ArrayFotos.Count();

                Byte[] Foto = ArrayFotos[0];

                Response.Buffer = true;
                Response.Clear();
                Response.ContentType = "image/jpeg";
                Response.Expires = 0;
                Response.BinaryWrite(Foto);
                Session["NumFoto"] = 0;
            }
            else
            {
                List<Byte[]> ArrayFotos = new List<Byte[]>();
                string NombreDelHotel = "";

                Hoteles Hotel1 = (Hoteles)Session["ObjHoteles"];
                NombreDelHotel = Hotel1.NombreHotel;

                ArrayFotos = Persistencia.PersistenciaFotos.FotosDeHotel(NombreDelHotel);
                Session["CantFotos"] = ArrayFotos.Count();

                Byte[] Foto = ArrayFotos[(int)Session["NumFoto"]];

                Response.Buffer = true;
                Response.Clear();
                Response.ContentType = "image/jpeg";
                Response.Expires = 0;
                Response.BinaryWrite(Foto);

            }
        }

I need to find a way that doesnt clear all the page, just draw the image inside the user control.

Answer 1

There is also another simple way:

1. On your .aspx page:

   <asp:Image id="Image1" runat="server"></asp:Image>
   

2. Then in your CodeBehind file .aspx.cs:

   Image1.ImageUrl = "data:image/jpeg;base64," + Convert.ToBase64String(Foto)
   

Answer 2

You could write a page .aspx or a handler maybe .ashx that send the content of the picture back to the browser. You could pass information in the url. Then use the url to this page with an html tag or html control to display it.

EDIT: You need to use a Control. You could convert the binary data to base64 and output the content to the html page.

I give you an example with an img html tag:

<img alt="" src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAsMAAAGhCAIAAAALOi7ZAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QgLEhM6PUSGrwAAIABJREFUeNq8vcuSLEmWHKZ6jnlEZt5761Z3T/eAHAICAYRcEALsuOCWPzbzDfwP/gKXWJACoRDCBSkEBgPhADKY7qnu+4wIdztHuThmHh55q2t6ho+SlpaqyMwID3ez89CjqsY//dM//bM/+zMc/pGE3//PT/z09/1I0t/1Rz/x+o9+0I++vv/n8fU/8MW/9U9+9JVvL/v/u1cy86cv5ttfePXKq//8fTfhp+/qT3/oq8v+6V/+Ay/v25/+4X/46nqO"/>

You can also use base64 encoding for image with CSS:

background-image: url(data:image/jpeg;base64,IVB)

To convert into base64 from C# you can use:

using System;

and:

Convert.ToBase64String(Foto);

Answer 3

Response.Clear(); is deleting all the buffered content (i.e. everything in your page).

Instead of a user control to display a dynamic image, consider an HTTP handler (.ashx), like this:

ImageHandler.ashx:

public class ImageHandler : System.Web.IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        // Logic to get byte array here
        byte[] buffer = WhateverLogicNeeded;
        context.Response.ContentType = "image/jpeg";
        context.Response.OutputStream.Write(buffer, 0, buffer.Length);
    }

    public bool IsReusable
    {
        get { return false; }
    }
}

Then in your .aspx page:

<asp:Image ID="image1" runat="server" ImageUrl="~/ImageHandler.ashx" />

Note: If you want a specific image, then you can pass a query string (i.e. image ID) to the handler and have the byte array logic account for using the query string value.