Primefaces dynamic image in datatable using pagination

Question

I have successfully implemented the solution suggested by BalusC for rendering dynamic images inside a datatable (code posted further down here). Problem I am facing is this:

I am using in datatable and when I move to the page which I have never visited, the images render fine. ，当我移至从未访问过的页面时，图像呈现良好。 But when I come back to the page I had visited earlier, the images don't show up even though the StreamedContent is returned for that image.

// ImageBean - SessionScoped        
// Get image for compound
public StreamedContent scaledImageById() {
    FacesContext context = FacesContext.getCurrentInstance();

    if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
        return new DefaultStreamedContent();
    } else {
        String idStr = context.getExternalContext().
                                       getRequestParameterMap().get("id");
        StreamedContent image = scaledCompoundImageMap.
                                              get(Integer.valueOf(idStr));
        return image;
    }
}


// Controller - ViewScoped
<p:dataTable id="cTable" value="#{controller.compoundList}" var="compound">
       <p:column headerText="Structure" style="text-align:center">
          <p:graphicImage id="scaledImage" 
                          value="#{imageBean.scaledImageById()}"     
                          cache="false">
                <f:param name="id" value="#{compound.id}" />
          </p:graphicImage>
       </p:column>   
  ...

So when I visit a new page in the paginator, the images display fine. But when I come back to an already visited page, the images are not shown (even though the scaledImageById is called twice and the StreamedContent is returned fine).

Please let me know if you need any other code here and any help would be much appreciated. Thanks.

Abdul

Answer 1

From the HTML side, you have img element:

<img src="some_url?id=xyz"/>

If the images are stored in the database, and are never changed (uploading new image creates new image id in your entity), you can achieve more flexibility and performance creating custom servlet for images.

1) Create the servlet and bind it to 'some_url'

2) In the servlet, read the image from database (or anything else)

3) Set the headers, most important content type and content length, and cache headers

4) Write the content to the output stream

The plus is, if you have constant url for the image and good caching policy, the browser would fetch the image from the cache - the bean doesn't have to be called each time.