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

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);