My code does not show my images saved in blob type database in my jsp file?

Question

I have a problem that the images registered in my mysql database are not displayed, I have a table and between that table I have a column of photos and I want to list it together with my other columns but I cannot find the solution to the problem below I add code from my ArrayList method and the call in my jsp and the result

Method of my class DAO

public ArrayList<CitaVO> listarCitas(String cliente_idCliente) {

        CitaVO citVO = null;
        conexion = this.obtenerConexion();
        ArrayList<CitaVO> listaCitas = new ArrayList<>();
        try {
            sql = "SELECT * FROM vwcitasactivas WHERE cliente_idCliente=?";
            puente = conexion.prepareStatement(sql);
            puente.setString(1, cliente_idCliente);
            mensajero = puente.executeQuery();

            while (mensajero.next()) {
                citVO = new CitaVO(mensajero.getString(1),
                        mensajero.getString(2), mensajero.getBinaryStream(3),
                        mensajero.getString(4), mensajero.getString(5),
                        mensajero.getString(6), mensajero.getString(7),
                        mensajero.getString(8), mensajero.getString(9),
                        mensajero.getString(10), mensajero.getString(11),
                        mensajero.getString(12),cliente_idCliente);
                listaCitas.add(citVO);

            }
        } catch (Exception e) {
            Logger.getLogger(ProAgendaDAO.class.getName()).log(Level.SEVERE, null, e);
        }
        return listaCitas;

jsp where I list the results

<%
                                                        CitaVO citVO = new CitaVO();
                                                        CitaDAO citDAO = new CitaDAO();
                                                        ArrayList<CitaVO> listaCitas = citDAO.listarCitas(idCliente);
                                                        for (int i = 0; i < listaCitas.size(); i++) {
                                                            citVO = listaCitas.get(i);

                                                    %>
                                                    <tr>
                                                        <td>
                                                            <div class="round-img">
                                                                <a href=""><img src="data:image/jpg;base64,<%=citVO.getUsuFoto()%>" alt="" width="50px" height="50px" ></a>
                                                            </div>
                                                        </td>
                                                        <td><%=citVO.getUsuNombre()%> <%=citVO.getUsuApellido()%></td>
                                                        <td><%=citVO.getUsuCiudad()%></td>
                                                        <td><%=citVO.getCitFecha()%></td>
                                                        <td><%=citVO.getProDia()%></td>
                                                        <td><%=citVO.getCitDireccion()%></td>
                                                        <td><%=citVO.getCitHoraInicio()%></td>
                                                        <td><%=citVO.getCitHoraFin()%></td>
                                                        <td <%=citVO.getCitEstado()%>><span class="badge badge-primary">Activa</span></td>
                                                        <td>
                                                            <span><a href="Cita?opcion=6&textId=<%=citVO.getIdCita()%>&textEstado=<%=citVO.getCitEstado()%>"><i class="ti-eye color-default"></i></a> </span>
                                                            <span><a href="Cita?opcion=7&textId=<%=citVO.getIdCita()%>"><i class="ti-pencil-alt color-success"></i></a></span>
                                                            <span><a href="Cita?opcion=3&textId=<%=citVO.getIdCita()%>&textEstado=<%=citVO.getCitEstado()%>" class="btn sweet-confirm" onclick="return cancelarCita(event)"><i class="ti-trash color-danger"></i> </a></span>
                                                        </td>
                                                    </tr>
                                                    <%}%>

result of my jsp my images do not appear Image result

Answer 1

The problem is that the src attribute of an <img> element requires a URL and you are not passing it a URL.

It seems you are attempting to take whatever you got from your database and put that straight into the src attribute in the hope that this would work. If you look at the HTML source of the page you will probably see something like this:

<img src="SomeClassNameHere@18f34fdc" ... >

That's not a URL, that's what you get when you take an object whose class doesn't override .toString() and attempt to convert it to a string.

There are two solutions to this problem:

1. Convert the image data to base64 and use a data: URL to contain the data. You can then put this URL in the src attribute of the <img> element. See this answer. I don't know how large the images you are attempting to show are (your question hints that they are 50 pixels by 50 pixels), but if they are quite large, this might not be the right approach.
2. Have a servlet that returns the image data, and write out suitable URLs that call this servlet. For example, you may choose to have your servlet respond to /usuFoto/<id>, where <id> is the clienteId of the image, and for the src attribute you would write out something like src="/usuFoto/<%= cliente_idCliente %>. See this answer for an example of how to write such a servlet.