p:graphicImage does not display image

Question

Guys I’m having trouble displaying an image within my project in a Data Table. Simply the image is blank. The system makes a query in the mysql database of the image directory to know which image represents the specific team. This is the code to query:

    public ArrayList<Jogo> listarTodosBrasao() throws SQLException{
    StringBuilder sql = new StringBuilder();
    sql.append("SELECT j.id_jogo, j.dia, t_a.brasao, t_b.brasao FROM bolaodovibao.jogo j ");
    sql.append("INNER JOIN bolaodovibao.time t_a "); 
    sql.append("ON t_a.id_time=j.time_a "); 
    sql.append("INNER JOIN bolaodovibao.time t_b ");
    sql.append("ON t_b.id_time=j.time_b ORDER BY j.dia ASC ");

    Connection conexao = ConexaoFactory.conectar();

    PreparedStatement comando = conexao.prepareStatement(sql.toString());

    ResultSet resultado = comando.executeQuery();

    ArrayList<Jogo> lista = new ArrayList<Jogo>();

    while (resultado.next()) {
        Time time_a = new Time();
        time_a.setNome_time(resultado.getString("t_a.brasao"));

        Time time_b = new Time();
        time_b.setNome_time(resultado.getString("t_b.brasao"));

        Jogo jogo = new Jogo();
        jogo.setId_jogo(resultado.getInt("j.id_jogo"));
        jogo.setDia(resultado.getString("j.dia"));
        jogo.setTime_a(time_a);
        jogo.setTime_b(time_b);

        lista.add(jogo);
    }
    return lista;
}

This is my xhtml:

<p:dataTable emptyMessage="Nenhum registro encontrado." value="#{JogoMB.jogos}" 
    var="jogo" paginator="true" paginatorPosition="bottom" rows="4" >
        <p:column headerText="Dia da Partida">
            <h:outputText value="#{jogo.dia}" ></h:outputText>
        </p:column> 

        <p:column headerText="Time A" >
            <p:graphicImage style="width: 80px; height: 80px;" value="#{jogo.time_a.brasao}" stream="false" />
        </p:column> 

        <p:column headerText="Time B" >
            <p:graphicImage style="width: 80px; height: 80px;" value="#{jogo.time_b.brasao}" stream="false" />
        </p:column> 

        <p:column headerText="Apostar" >
            <p:commandButton type="button" value="Apostar" />   
        </p:column> 
    </p:dataTable>

This is my bank,id_time is PK and has another table on the bench called GAME that gets PK as FK:

Screen result:

Answer 1

As I told you earlier, I replicated your situation here using Maven, primefaces 6.0 and got the same problem as you. What happens is that Graphicimage makes two HTTP requests per generated image. I read in some forums treating this way of Graphicimage work as a bug, but I don’t know if it is correct to say that. It gives way that I work with images in the primefaces, I had no big problems and I find it much quieter to work like this, so I declare the library and the name of the file coming from the database, see the example:

<p:column headerText="Imagem" style="text-align: center">
        <p:graphicImage library="img" name="#{imagem.nome}.png" width="120"
            url="http://suaPagina/seuProjeto">
        </p:graphicImage>
</p:column>

In the above case the structure is: /Resources/img/name.png

I found a way to publish the image using value and requesting the default Resources folder file. I did it in two ways, one using the primefaces and the other using ominifaces, if you do not know ominifaces take a look at the site: http://showcase.omnifaces.org/ is more an option of an exelent library to work with JSF pages. Follow the example of Bean:

    import java.io.InputStream;
    import javax.faces.bean.RequestScoped;
    import javax.inject.Named;

    import org.omnifaces.util.Faces;
    import org.primefaces.model.DefaultStreamedContent;
    import org.primefaces.model.StreamedContent;

    @Named
    @RequestScoped
    public class ExemploRequestImagem {

        //usando ominifaces 
        public InputStream getImage() {
            return Faces.getResourceAsStream("/resources/img/large.jpg");
        }

        //usando primefaces
        public StreamedContent getImagem2() {
            InputStream input = this.getClass().getResourceAsStream("resources/img/large.jpg");
            return new DefaultStreamedContent(input);
        }
    }

And . xhtml goes like this:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:o="http://omnifaces.org/ui">

    <h:form id="frmTeste">
    <p>
        <p:graphicImage style="width: 150px; height: 150px;" value="#{exemploRequestImagem.imagem2}">
        </p:graphicImage>
    </p>

    <p>
        <o:graphicImage style="width: 150px; height: 150px;"  value="#{exemploRequestImagem.image}" dataURI="true" />
    </p>

    </h:form>
</ui:composition>

I hope this helps solve your problem.