Image does not appear in the JSP table

Question

I recorded an image in my database where I uploaded it to my HTML page. It saves the image in bytes in my database, but when showing it in a table, it does not appear.

UPDATE

My HTML in my JSP:

<h3>Lista de Produtos Cadastrados</h3>

      <table border="1">
      <tr>
          <th>Codigo</th> 
          <th>Produto</th>
           <th>Nome</th>
           <th>Descricao</th>
           <th>Valor</th>
           <th>Marca</th>
           <th>Tamanho</th>
           <th>Parcelas</th>
          <th>Tecido</th>
      </tr>


      <c:forEach items="${requestScope.produtos}" var="registro">

          <tr>
              <td> <c:out value="${registro.codigo}"/></td>
              <td> <img src="<c:url value="/produto/imagens=?id=${registro.codigo}"/>"</td>
              <td> <c:out value="${registro.nome}"/></td>
              <td> <c:out value="${registro.descricao}"/></td>
              <td> <c:out value="${registro.valor}"/></td>
              <td> <c:out value="${registro.marca}"/></td>
              <td> <c:out value="${registro.tamanho}"/></td>
              <td> <c:out value="${registro.parcelas}"/></td>
              <td> <c:out value="${registro.tecido}"/></td>
          </tr>


      </c:forEach>





  </table> 

By registering the products correctly, you are redirected to Servlet @WebServlet(urlPatterns = {"/produtos/listar"}) that Servlet redirects to the Register pageproducts that contain the table that will display the data. All data are presented except the registered image

My Product Registration Page that contains the table that will show the data.

My Servlet responsible for the registration

protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {



    int id = 0;
    String nome = request.getParameter("nome");
    String descricao = request.getParameter("descricao");
    double valor = Double.parseDouble(request.getParameter("valor"));
    String marca = request.getParameter("marca");
    String tamanho = request.getParameter("tamanho");
    int parcelas = Integer.parseInt(request.getParameter("parcelas"));
    String tecido = request.getParameter("tecido");

    Part imagePart = request.getPart("file");
    String tipo = getFileType(imagePart);
    byte[] conteudo = imagePart == null ? new byte[0] : getBytesFromInputStream(imagePart.getInputStream());

    Produtos p = new Produtos(id, nome, descricao, valor, marca, tamanho, parcelas, tecido);
    ImagemProdutos im = new ImagemProdutos(tipo, conteudo);


    ProdutosDAO.instancia().salvar(p, im);

    RequestDispatcher dispatcher = request.getRequestDispatcher("/produtos/listar");
    dispatcher.forward(request, response);



}

My Privacy responsible for listing data

 @WebServlet(urlPatterns = {"/produtos/listar"})
 protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {

     try {
        List<Produtos> produtos = ProdutosDAO.instancia().listarTodos();
        request.setAttribute("produtos", produtos);
        RequestDispatcher dispatcher = request.getRequestDispatcher("/CadastroProdutos.jsp");
        dispatcher.forward(request, response);
    } catch (ClassNotFoundException ex) {
        Logger.getLogger(ListarProdutos.class.getName()).log(Level.SEVERE, null, ex);
    }


}

Mine Servlet responsible for displaying the image

 @WebServlet(urlPatterns = {"/produto/imagens"})
 protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {

    //a imagem deve ser eniada por url, em uma servlet separada propria

    try {
        int id = Integer.parseInt(request.getParameter("id"));
        Model.ImagemProdutos ip = ProdutosDAO.instancia().lerImagem(id);
        response.setContentType("image/" + ip.getFormato());
        response.getOutputStream().write(ip.getConteudo());


    } catch (ClassNotFoundException ex) {
        Logger.getLogger(ImagemProdutosServlet.class.getName()).log(Level.SEVERE, null, ex);
    }
}

Answer 1

Where is your problem

The problem is here:

<img src="<%=registro.getImagem()%>" width="100" height="100" />

You haven’t shown how the method is getImagem() of your class Produtos, but when looking at it, you can believe it returns an array of bytes:

pro.setImagem(rs.getBytes("prod_imagem"));

The problem is that in HTML, the tag src serves to tell which is the URL from which the image can be downloaded, and not to give the sequence of bytes that match the image.

Image type

There is still the problem that you do not specify the image type. Let’s assume it may be "png", "jpeg" or "gif" (in lower case). Add methods getFormatoImagem() and setFormatoImagem(String) in class Produtos (beyond a field private String tipoImagem) and a column prod_tipo_imagem on the table tb_produtos from the database. If the type of the image is always the same (for example, they are all "png"), this is not necessary.

Having then a field for the image type, there are at least two possible approaches. The first would be to use a data-Union on a 64-basis and the other is with a picture Preview.

The data-Union approach

You’d put it that way:

<img src="data:image/<%=registro.getFormatoImagem()%>;base64,<%=new String(java.util.Base64.getUrlEncoder​().encode(registro.getProd_codigo()))%>" width="100" height="100" />

If the image is of a fixed type, you can replace the <%=registro.getFormatoImagem()%> by its type (e.g.: "png").

However, this approach is not very advantageous for large or very numerous images, as it makes the page load very heavy. So let’s look at the other approach.

Image servlet

Images are loaded via Urls. Then the solution would be to give a URL to the image:

<img src="<%=request.getLocalName()%>:<%=request.getLocalPort()%>/images?id=<%=registro.getProd_codigo()%>" width="100" height="100" />

And then you have to put a Servlet to provide the answer in bytes. Something like this (assuming you are using Servlets 3.0 or higher):

import java.io.IOException;
import javax.servlet.HttpServlet;
import javax.servlet.HttpServletRequest;
import javax.servlet.HttpServletResponse;
import javax.servlet.WebServlet;

@WebServlet(urlPatterns = {"/produto/imagens"})
public class ImagemServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws IOException
    {
        int id = Integer.parseInt(request.getParameter("id"));
        ProdutosDAO dao = new ProdutosDAO();
        Produtos p = dao.mostrarProduto(id);
        response.setContentType("image/" + p.getFormatoImagem());
        response.getOutputStream().write(p.getImagem());
    }
}

If the image format is fixed, you would use response.setContentType("image/png");, for example.

Reviewing the code of the class Produtos

Note that you carry the products along with your images. However, loading the image bytes is something heavy in terms of IO, processing and memory. Also, when mounting an instance of Produtos, Only in a few cases will you be interested in loading the image bytes. In particular, if you make a list of products and fill it with the images, it will burst the server memory easily. Now that we have an approach that brings the images separately from the rest of the product content, we can separate them.

Java has code conventions which is highly recommended to be followed. This means names like setProd_desc are out of pattern, the pattern would be setProdutoDescricao. In fact, if the class is called Produtos, then the Produto in the method name is redundant, and setDescricao would be enough. Another observation is that the class name should be in the singular and not in the plural.

Immutable classes are easier to work than changing class, and their class Produto is a good candidate for one of these. Also, it is good practice that the builder returns an already properly manufactured object instead of a skeleton to be repaired later by calling itself a lot of setters.

Considering that, so do your classes:

public final class Produto {
    private final int codigo;
    private final String nome;
    private final String descricao;
    private final double valor;
    private final String marca;
    private final String tamanho;
    private final int parcelas;
    private final String tecido;

    public Produto(
            int codigo,
            String nome,
            String descricao,
            double valor,
            String marca,
            String tamanho,
            int parcelas,
            String tecido)
    {
        this.codigo = codigo;
        this.nome = nome;
        this.descricao = descricao;
        this.valor = valor;
        this.marca = marca;
        this.tamanho = tamanho;
        this.parcelas = parcelas;
        this.tecido = tecido;
    }

    public int getCodigo() {
        return codigo;
    }

    public String getNome() {
        return nome;
    }

    public String getDescricao() {
        return descricao;
    }

    public String getValor() {
        return valor;
    }

    public String getMarca() {
        return marca;
    }

    public String getTamanho() {
        return tamanho;
    }

    public int getParcelas() {
        return parcelas;
    }

    public String getTecido() {
        return tecido;
    }
}

public final class ImagemProduto {
    private final String formato;
    private final byte[] conteudo;

    public ImagemProduto(String formato, byte[] conteudo) {
        this.formato = formato;
        this.conteudo = conteudo;
    }

    public String getFormato() {
        return formato;
    }

    public byte[] getConteudo() {
        return conteudo;
    }
}

Reviewing the code of the class ProdutosDAO

Your class ProdutosDAO also needs revision.

First of all, use the Try-with-Resources it is highly recommended to make sure that you are closing open resources properly as well as not having to keep breaking your head by writing boring code to do this kind of work.

Second, use the appropriate generic types.

Third, do not use JOptionPane on DAO. The JOptionPane will show an error screen on the server, where no one will be looking, and not on the client side. Also, this is a violation of MVC standard.

Fourthly, different instances of ProdutoDAO are not distinguishable and all have the same behaviour. Therefore, it makes no sense to have more than one instance, and so we can use the Singleton standard:

Therefore, we will re-elaborate your DAO, considering the class Conecta that you referenced in that other question of yours:

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class ProdutoDAO {

    private static final String LISTAR_SQL = "SELECT prod_cod, prod_nome, prod_desc, prod_valor, prod_marca, prod_tamanho, prod_parcelas, prod_tecido FROM tb_produtos";

    private static final String POR_ID_SQL = "SELECT prod_cod, prod_nome, prod_desc, prod_valor, prod_marca, prod_tamanho, prod_parcelas, prod_tecido FROM tb_produtos WHERE cod_prod = ?";

    private static final String IMAGEM_SQL = "SELECT prod_tipo_imagem, prod_imagem FROM tb_produtos WHERE prod_cod = ?";

    private static final String INSERT_SQL = "INSERT INTO tb_produtos (prod_cod, prod_nome, prod_desc, prod_valor, prod_marca, prod_tamanho, prod_parcelas, prod_tecido, prod_tipo_imagem, prod_imagem) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";

    private static final ProdutoDAO singleton = new ProdutoDAO();

    private ProdutoDAO() {
    }

    public static ProdutoDAO instancia() {
         return singleton;
    }

    private Produto lerProduto(ResultSet rs) throws SQLException {
        int codigo = rs.getInt("prod_cod");
        String nome = rs.getString("prod_nome");
        String descricao = rs.getString("prod_desc");
        double valor = rs.getDouble("prod_valor");
        String marca = rs.getString("prod_marca");
        String tamanho = rs.getString("prod_tamanho");
        int parcelas = rs.getInt("prod_parcelas");
        String tecido = rs.getString("prod_tecido");
        return new Produto(codigo, nome, descricao, valor, marca, tamanho, parcelas, tecido);
    }

    private ImagemProduto lerImagem(ResultSet rs) throws SQLException {
        String tipo = rs.getString("prod_tipo_imagem");
        byte[] conteudo = rs.getBytes("prod_imagem");
        return new ImagemProduto(tipo, conteudo);
    }

    public List<Produto> listarTodos() {
        try (
            Connection con = Conecta.conexao();
            PreparedStatement ps = con.prepareStatement(LISTAR_SQL);
            ResultSet rs = ps.executeQuery();
        ) {
            List<Produto> lista = new ArrayList<>(); 
            while (rs.next()) {
                lista.add(lerProduto(rs));
            }
            return lista;
        } catch (SQLException e) {
           throw new RuntimeException(e);
        }
    }

    public Produto lerProduto(int idProduto) {
        try (
            Connection con = Conecta.conexao();
            PreparedStatement ps = con.prepareStatement(POR_ID_SQL);
        ) {
            ps.setParameter(1, idProduto);
            try (ResultSet rs = ps.executeQuery()) {
                return lerProduto(rs);
            }
        } catch (SQLException e) {
           throw new RuntimeException(e);
        }
    }

    public ImagemProduto lerImagem(int idProduto) {
        try (
            Connection con = Conecta.conexao();
            PreparedStatement ps = con.prepareStatement(IMAGEM_SQL);
        ) {
            ps.setParameter(1, idProduto);
            try (ResultSet rs = ps.executeQuery()) {
                return lerImagemProduto(rs);
            }
        } catch (SQLException e) {
           throw new RuntimeException(e);
        }
    }

    public void salvar(Produto pro, ImagemProduto im) {
        try (
            Connection con = Conecta.conexao();
            PreparedStatement ps = con.prepareStatement(INSERT_SQL);
        ) {
            ps.setInt(1, pro.getCodigo());
            ps.setString(2, pro.getNome());
            ps.setString(3, pro.getDescricao());
            ps.setDouble(4, pro.getValor());
            ps.setString(5, pro.getMarca());
            ps.setString(6, pro.getTamanho());
            ps.setInt(7, pro.getParcelas());
            ps.setString(8, pro.getTecido());
            ps.setString(9, im.getFormato());
            ps.setBytes(10, im.getConteudo());
            ps.execute();
        } catch (SQLException e) {
           throw new RuntimeException(e);
        }
    }
}

Note that as you have not specified what is in the class Conecta, but I’m sure there are things to improve on.

Finally, we will apply the changes in our class ImagemServlet:

import java.io.IOException;
import javax.servlet.WebServlet;
import javax.servlet.HttpServlet;
import javax.servlet.HttpServletRequest;
import javax.servlet.HttpServletResponse;

@WebServlet(urlPatterns = {"/produto/imagens"})
public class ImagemServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws IOException
    {
        int id = Integer.parseInt(request.getParameter("id"));
        ImagemProduto ip = ProdutoDAO.instancia().lerImagem(id);
        response.setContentType("image/" + ip.getFormato());
        response.getOutputStream().write(ip.getConteudo());
    }
}

Setting up the Rvlets

Scriptlets are considered hated, outdated, and obsolete. Mixing Java code grafted into pieces of HTML is a horrific thing to do, and that’s one of several reasons why scriptlets should be abandoned. In addition, the use of scriptlets tends to lead to a violation of MVC standard.

The first step in eliminating scriptlets is to separate the behavior in Servlets so it is not mixed with JSP:

import java.io.IOException;
import javax.servlet.HttpServlet;
import javax.servlet.HttpServletRequest;
import javax.servlet.HttpServletResponse;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.WebServlet;

@WebServlet(urlPatterns = {"/produto/listar"})
public class ListagemProdutoServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        List<Produto> produtos = ProdutoDAO.instancia().listarTodos();
        request.setAttribute("produtos", produtos);
        RequestDispatcher dispatcher = request.getRequestDispatcher("/produtos.jsp");
        dispatcher.forward(request, response);
    }
}

import java.io.ByteArrayOutputStream;
import java.io.InputStream;
import java.io.IOException;
import javax.servlet.HttpServlet;
import javax.servlet.HttpServletRequest;
import javax.servlet.HttpServletResponse;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.WebServlet;

@WebServlet(urlPatterns = {"/produto/salvar"})
@MultipartConfig
public class SalvarProdutoServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        int id = Integer.parseInt(request.getParameter("id"));
        String nome = request.getParameter("nome");
        String descricao = request.getParameter("descricao");
        double valor = Double.parseDouble(request.getParameter("valor"));
        String marca = request.getParameter("marca");
        String tamanho = request.getParameter("tamanho");
        int parcelas = Integer.parseInt(request.getParameter("parcelas"));
        String tecido = request.getParameter("tecido");

        Part imagePart = request.getPart("imagem");
        String tipo = getFileType(imagePart);
        byte[] conteudo = imagePart == null ? new byte[0] : getBytesFromInputStream(imagePart.getInputStream());

        Produto p = new Produto(id, nome, descricao, valor, marca, tamanho, parcelas, tecido);
        ImagemProduto im = new ImagemProduto(tipo, conteudo);

        ProdutoDAO.instancia().salvar(p, im);

        RequestDispatcher dispatcher = request.getRequestDispatcher("/produtos/listar");
        dispatcher.forward(request, response);
    }

    private String getFileType(Part part) {
        if (part == null) return "";
        String partHeader = part.getHeader("content-disposition");
        for (String content : partHeader.split(";")) {
            String trimmedContent = content.trim();
            if (trimmedContent.startsWith("filename")) {
                String nomeEntreAspas = trimmedContent.substring(trimmedContent.indexOf('=') + 1);
                String nomeDoArquivo = nomeEntreAspas.trim().replace("\"", "");
                String extensao = nomeDoArquivo.substring(nomeDoArquivo.indexOf('.') + 1);
                return extensao;
            }
        }
        return null;
    }

    public static byte[] getBytesFromInputStream(InputStream is) throws IOException {
        ByteArrayOutputStream os = new ByteArrayOutputStream();
        byte[] buffer = new byte[1024 * 1024];

        int len;
        while ((len = is.read(buffer)) != -1) {
            os.write(buffer, 0, len);
        }

        return os.toByteArray();
    }
}

The Servlet ListagemProdutoServlet uses the DAO to read the list of products (without the images, once these are read in the ImagemServlet) and put the read list in the request. Then it redirects to JSP produtos.jsp.

Already the Servet SalvarProdutoServlet uses DAO to save the product and redirects to the ListagemProdutoServlet which will read the list of products and redirect to produtos.jsp. The SalvarProdutoServlet is a Servlet Multipart (see more about this here).

The method getBytesFromInputStream is responsible for reading a InputStream completely (which corresponds to the submitted file) and thereby provide an array of bytes that contains the contents of the file. I caught it of Soen’s reply.

If/when you start using Java 9, the getBytesFromInputStream(imagePart.getInputStream()) could/could be replaced by imagePart.getInputStream().readAllBytes(), and with it the method getBytesFromInputStream(InputStream) would become unnecessary. With the new method readAllBytes() of Java 9, we could take the entire contents of the uploaded file in a simpler way.

You’ll still need to change the SalvarProdutoServlet to verify that all data that should be passed are present and have been filled in validly before actually entering the DAO.

Reviewing your JSP code

Assuming your JSP is the page produtos.jsp which I referred to, now that we already have the logic of accessing the database within Serrvlets, only the JSP can display the data.

With the use of JSTL and EL, we can then finally delete all scriptlets. Here is the resulting code:

<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Listagem de produtos</title>
    </head>
    <body>
        <form action="<c:url value="/produto/salvar" />" method="POST" enctype="multipart/form-data">
            <div class="row">
                <div class="col-6 col-md-4"></div>
                <div class="col-6 col-md-4"><h2>Cadastro de Produtos</h2></div>
                <div class="col-6 col-md-4"></div>
            </div>
            <div class="conteudo_cadastro"> 
                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        Nome do produto: <input type="text" id="nome" name="nome" />
                    </div>

                    <div class="col-sm-6 col-md-4">
                        Descrição: <input type="text" id="descricao" name="descricao" />
                    </div>

                    <div class="col-sm-6 col-md-4">
                        Valor: <input type="text" id="valor" name="valor" />
                    </div>
                </div>

                <div class="row">
                    <!--div class="col-sm-6 col-md-4">
                        Cor: <input type="text" id="cor" name="cor" />
                    </div -->

                    <div class="col-sm-6 col-md-4">
                        Marca: <input type="text" id="marca" name="marca" />
                    </div>

                    <div class="col-sm-6 col-md-4">
                        Tamanho: <input type="text" id="tamanho" name="tamanho" />
                    </div>

                    <div class="col-sm-6 col-md-4">
                        Parcelas: <input type="text" id="parcelas" name="parcelas" />
                    </div>

                    <div class="col-sm-6 col-md-4">
                        Tecido: <input type="text" id="tecido" name="tecido" />
                    </div>

                    <div class="col-sm-6 col-md-4">
                        Código: <input type="text" name="codigo" id="codigo" />
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        Arquivo: <input type="file" name="imagem" id="imagem"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <input type="submit" value="Cadastrar" />
                    </div>
                </div>
            </div>
        </form>

        <h3>Lista de Produtos Cadastrados</h3>

        <table border="1">
            <tr>
                <th>Código</th> 
                <th>Foto</th>
                <th>Nome</th>
                <th>Descrição</th>
                <th>Valor</th>
                <th>Marca</th>
                <th>Tamanho</th>
                <th>Parcelas</th>
                <th>Tecido</th>
            </tr>

            <c:forEach items="${requestScope.produtos}" var="registro">
                <tr>
                    <td><c:out value="${registro.codigo}" /></td>
                    <td><img src="<c:url value="/produto/imagens?id=${registro.codigo}" />"</td>
                    <td><c:out value="${registro.nome}" /></td>
                    <td><c:out value="${registro.descricao}" /></td>
                    <td><c:out value="${registro.valor}" /></td>
                    <td><c:out value="${registro.marca}" /></td>
                    <td><c:out value="${registro.tamanho}" /></td>
                    <td><c:out value="${registro.parcelas}" /></td>
                    <td><c:out value="${registro.tecido}" /></td>
                </tr>
            </c:forEach>
        </table>
    </body>
</html>