Database image displayed in primefaces does not appear

Asked

Viewed 1,761 times

0

I am implementing a page where I need to display a datagrid with the values of a table in the database. Each table row has a blob image.

But when trying to display the image with the primefaces by the tag : it does not appear.

below has the part of the code of the entity in which has the property of the image and the function that puts it in the Defaultstreamedcontent format that is supported by the tag of the first faces.

@Lob
@Basic(fetch= FetchType.LAZY)
private byte[] imagem;

public Projetista() {

}

public StreamedContent mostrarImagemDeByte(){
    InputStream in = null;
    StreamedContent sc;
    if(this.imagem != null){
        in = new ByteArrayInputStream(this.imagem);
    }

    if( in != null){
        sc  = new DefaultStreamedContent(in);
    }else{
        sc = null; 
    }
         return sc;
}

below the code part of the page where I use to display the image

<div id="envolveTexto">
                <div id="texto">

                    <p:dataGrid columns="3" value="#{projetistaBean.listaDeProjetistas}" var="projetista" >

                        <p:panelGrid columns="1">
                            <p:graphicImage value="#{projetista.mostrarImagemDeByte()}" width="70" height="70" />
                            <h:outputText value="#{projetista.nome}" />
                        </p:panelGrid>

                    </p:dataGrid>

                </div>
             </div>

It was to appear a datagrid with the images that are in the database, along with the name of each of them.

mysql jsf primefaces image

  • I don’t know the context of your application, but it’s not a good practice to record images directly in the database. You could save these images to the server where the application is creating a folder/subfolder structure if necessary. In the database you would only save the path or name of the image, in a common varchar field.

2 answers

2

Solved!!

graphicImage does not work if it is used within a set tag such as datagrid if images are saved in a database.

If you need to show them inside a datagrid, you must save the images in temporary folders inside the application server and then reference them by id.

I did it and it worked

  • User, it actually works, but it needs a somewhat unorthodox construction. I’ve fallen into this same trap before. The problem here is the scope of bean (that should be set as request). As Balusc explained it in Soen’s reply the method that generates the image is called twice (once to generate the URL and a second time when the browser actually resolve to download it); as this happens in two requests subsequent scope is important.

  • Write a Managed bean @ApplicationScoped to recover the images and use the tag <f:param> to traffic the id from the current designer to the method that will display the image (full example in the Balusc response). This was your guarantee that the image content is always available and does not depend on any state on the application side.

0

Instead of:

sc  = new DefaultStreamedContent(in);

Tries:

sc  = new DefaultStreamedContent(in, "image/png");

It’s just a detail, but often that kind of detail is the "x" of the question.

Another thing, change the name of the method of showImagemDeByte for getMostrarImagemDeByte.

  • I made the change of the two things you said, but unfortunately it still doesn’t show up. Strange that I have another application using the same process and works.

  • And no error message appears? Nothing on the console? No exceptions?

  • worse than not.. The problem is that the image appears as if it were an image without format.

  • Your Managedbean is with what scope? To work it needs to be with @Requestscoped.

  • Use Sessionscoped, but this is not the problem. I did a test now and saw that it just isn’t working when I use it within a data list, as it was using on a datagrid. Then I did a test searching the database a single element of the table and used the same way to show the image and worked

  • Man, that is so weird. I made an application with JSF + Primefaces and on a given page I also use a datagrid to list images that were saved by the application. And here it works normal. The only detail is that I had to leave MB with @Requestscoped in order to return Streamedcontent. Your p:datagrid is within an h:form?

  • is. It’s weird. It works normal, but it doesn’t work for datagrid and I switched to requestScoped, but it’s still the same

  • your images were saved in database, or in folders in the application?

  • Unfortunately I have no more idea what it might be, but to finish: in your XHTML take the parentheses in the #{projectionist.showImagemDeByte()} and try to leave the method with the get in front.

  • In folders on the server where the application is. It is unwise to save images directly in the database.

Show 5 more comments

Browser other questions tagged mysql jsf primefaces image

You are not signed in. Login or sign up in order to post.