p: graphicImage does not display image

Question

p: graphicImage does not display image

Navigation

#1 by (0 votes)

0

Personally I'm having trouble displaying an image within my project on a Data Table. Simply the image goes blank. The system makes a query in the mySQL database of the image directory to know which image represents the specific team. Here is the code to see:

    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>

My bank, id_time is PK and has another table in the bank called GAME that receives PK as FK:

Resultonscreen:

front-end primefaces back-end

asked by anonymous 25.12.2017 / 23:59

1 answer

Remove Android title bar - Cordova Deprecated mongoose method

score 0 · Accepted Answer

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 dealing with this form of GraphicImage working as a bug, but I do not know if it is correct to say so. So I work with images in the firstfaces, I did not have any big problems and I think it's much easier to work like this, so I declare the library and file name from the database, see 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/nome.png

I found a way to publish the image using value and requesting the file from the default resources folder. I did it in two ways, one using primefaces and one using ominifaces, if you do not know theminifaces take a look at the site: link is one more option of an excellent library to work with JSF pages. Here's the Bean example:

    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 the .xhtml looks 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 to solve your problem.