[ASPX] Mostrar Imagen en Base de Datos en una etiqueta

Es muy común que en alguna aplicación además de información de tipo texto o numérico (entre otras), sea también necesario almacenar imágenes correspondientes a la información que se requiere representar.

Supongamos una aplicación en la cual se desean mostrar los eventos que se realizaran en cierta institución ordenada en cierta manera pero que además de la información propia del evento, se quiera mostrar un carrusel con JQuery en el cual se muestren los banners correspondientes a cada evento.

Para esto se deberá almacenar dicho banner en Base de Datos junto con la información textual del evento. He aquí la pregunta. Si mi imagen esta almacenada en base de datos, ¿Cómo puedo mostrar esta imagen en una etiqueta IMG? A continuación se muestra una opción para hacerlo.

Paso 1: Crear un WebForm llamado Imagen.aspx

Este formulario funcionara como url local para acceder a la imagen.

Paso 2: Obtener la imagen.

En este paso se consulta la base de datos para obtener la imagen en el evento Page_Load de la página Imagen.aspx, esto se hace de la misma forma que con cualquier dato.

//Recuperar el identificador
string id = Request.QueryString["id"];
//Crear conexion
using (SqlConnection con = new SqlConnection())
{
   //Obtener ConnectionSctring de web.config
   System.Configuration.Configuration rootWebConfig = System.Web.Configuration.WebConfigurationManager.OpenWebConfiguration("~");
   System.Configuration.ConnectionStringSettings connString;
   if (0 < rootWebConfig.ConnectionStrings.ConnectionStrings.Count)
   {
     connString=rootWebConfig.ConnectionStrings.ConnectionStrings["MiCadena"];
     if (null != connString)
     {
       con.ConnectionString = connString.ToString();
       con.Open();
       using (SqlCommand com = con.CreateCommand())
       {
          //tipo de comado StoreProcedure o consulta
          com.CommandType = CommandType.Text;
         //nombre del StoreProcedure o consulta
          com.CommandText = "SELECT Banner FROM Eventos WHERE IdEvento=" + id;
         try
         {
            //Ejecutar comando
            byte[] img = (byte[])com.ExecuteScalar();
         }catch(SqlException se){}
      }
      //Cerrar conexion
      con.Close();
   }
 }
}

Paso 3: Una vez obtenida la información de la imagen. Solo nos resta responder esta imagen como contenido de tipo “image/jpeg” ya que JPG es el formato en que se almaceno la imagen en la Base de Datos. Ver Tipos Mime


MemoryStream str = new MemoryStream();
str.Write(img, 0, img.Length);
Bitmap bit = new Bitmap(str);
Response.ContentType = "image/jpeg";//Responder Img JPG
bit.Save(Response.OutputStream, ImageFormat.Jpeg);

Paso 4: En el codigo HTML, mostrar la imagen de la siguiente manera:

<img alt="imagen1" src="Imagen.aspx?id=1" />

Con esto nos queda una URL local con la cual accedemos a la imagen que necesitamos.

Gracias

3 thoughts on “[ASPX] Mostrar Imagen en Base de Datos en una etiqueta

Responder a chuyrdz Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.