Mostrar BLOB (imagen) a través de JSP

Question

Tengo un código para mostrar un gráfico o empleados.

Los datos (nombre, teléfono, foto, etc.) se almacenan en SQLServer y se muestran a través de JSP. Mostrar los datos está bien, excepto la imagen .jpg (almacenada en la columna IMAGE = BLOB).

Por cierto, ya tengo la imagen mostrada (vea el código a continuación), pero no sé cómo ponerla en el área definida en un .css (vea también el código a continuación), ya que la imagen que se obtiene a través del resultSet se carga en toda la página en el navegador.

¿Alguien sabe cómo puedo 'enmarcar' la imagen?

<% 
Connection con = FactoryConnection_SQL_SERVER.getConnection("empCHART"); 
Statement stSuper = con.createStatement(); 
Statement stSetor = con.createStatement(); 

Blob image = null; 
byte[] imgData = null; 

ResultSet rsSuper = stSuper.executeQuery("SELECT * FROM funChart WHERE dept = 'myDept'"); 

if (rsSuper.next()) { 
image = rsSuper.getBlob(12); 
imgData = image.getBytes(1, (int) image.length()); 
response.setContentType("image/gif"); 
OutputStream o = response.getOutputStream(); 
//o.write(imgData); // even here we got the same as below. 
//o.flush(); 
//o.close(); 

--[...] 

<table style="margin: 0px; margin-top: 15px;"> 
<tr> 
<td id="photo"> 
<img title="<%=rsSuper.getString("empName").trim()%>" src="<%= o.wite(imageData); o.flush(); o.close(); %>" /> 
</td> 
</td> 

<td id="empData"> 
<h3><%=rsSuper.getString("empName")%></h3> 
<p><%=rsSuper.getString("Position")%></p> 
<p>Id:<br/><%=rsSuper.getString("id")%></p> 
<p>Phone:<br/><%=rsSuper.getString("Phone")%></p> 
<p>E-Mail:<br/><%=rsSuper.getString("Email")%></p> 
</td> 
</table> 

Y aquí es el fragmento supone para enmarcar la imagen:

#photo 
{ 
    padding: 0px; 
    vertical-align: middle; 
    text-align: center; 
    width: 170px; 
    height: 220px; 
} 

Gracias de antemano!

Answer 1

Estás cometiendo algunos errores fundamentales aquí. El <img src> debe señalar a una URL, que no contenga el contenido binario de la imagen. El tipo de contenido de la página JSP en sí no debe establecerse en image/gif. Debe mantenerse por defecto en text/html. No es cierto que se suponga que el servidor web incluya las imágenes concretas en el resultado HTML como parecía esperar. Es el navegador web el que descarga las imágenes individualmente en función de la URL que se encuentra en el atributo src y luego las presenta en consecuencia.

Lo más fácil es crear un servlet separado que transmita la imagen desde el DB al cuerpo de la respuesta. Puede identificar de forma única la imagen mediante un parámetro de solicitud o información de ruta. He aquí un ejemplo que utiliza un parámetro de la petición de que:

<img src="imageServlet?id=<%=rsSuper.getString("id")%>" /> 

El método doGet() debe entonces básicamente realizar este trabajo:

String id = request.getParameter("id"); 

// ... 

InputStream input = resultSet.getBinaryStream("imageColumnName"); 
OutputStream output = response.getOutputStream(); 
response.setContentType("image/gif"); 
// Now write input to output the usual way. 

---

Sin relación al problema concreto, usando scriptlets de esta manera se desaconseja oficialmente desde hace una década. Tal vez estaba leyendo libros/tutoriales completamente obsoletos o está manteniendo una antigua aplicación web JSP. Para algunas ideas, consulta las respuestas de las siguientes preguntas para obtener algunos consejos:

• How to avoid Java code in JSP files?
• Show JDBC ResultSet in HTML in JSP page using MVC and DAO pattern
• How to retrieve and display images from a database in a JSP page?

Answer 2

Si desea visualizar la imagen a través de una etiqueta HTML, tendrá que apuntar la imagen a un recurso en el servidor que carga la imagen, para que el navegador del cliente pueda cargarla. De esta forma, puede diseñar la etiqueta <img />.

Para lograr esto, la mayoría de las personas escribe un ImageServlet que carga los datos binarios de la imagen y escribe un <img src = "/source/to/someImageServlet?id=<%=rsSuper.getString("id")%>" id = "photo"/>.

Answer 3

Connection con = new DBConnection().getConnection(); 
     String sql = " SELECT * FROM tea "; 
     PreparedStatement ps = con.prepareStatement(sql); 
     ResultSet rs = ps.executeQuery(); 

     while (rs.next()) { 
      byte[] imgData = rs.getBytes("img"); // blob field 
      request.setAttribute("rvi", "Ravinath"); 
      rs.getString("teatitle"); 

      String encode = Base64.getEncoder().encodeToString(imgData); 
      request.setAttribute("imgBase", encode); 
     } 

jstl luego se usa para el extracto de atributos en la página JSP

<img src="data:image/jpeg;base64,${imgBase}" />