Alternative for p:graphicImage which can show images from byte[] and control browser cache

Question

There seems to be a bug with p:graphicimage when using the update-functionality. Loading one image through value="#{myController.myStreamedContent}" works, but when changing myController.myStreamedContent followed by updating p:graphicimage, the previously loaded image remains unchanged. There is the possibilty to set cache="false", but this does not work within my Firefox 45.0. I use PrimeFaces 5.3.

The following sites mention this, too:

• PRIMEFACES - How to refresh a from clicking a ?
• Primefaces : GraphicImage does not refresh
• Why can't I update a p:graphicImage twice after upload a file with p:uploadFile

Are there any alternatives that provide similar or equal functionality to p:graphicimage? I basically need to be able to show images stored as byte[] within a MEDIUMBLOB.

Answer 1

JSF utility library OmniFaces has a <o:graphicImage> which does technically a better job in streaming and caching the images. It doesn't invoke the getter method twice, but only once when the browser really needs to download the image. Also, it supports consuming a byte[] or InputStream without the need for a wrapper. All in all, you end up with clearer model.

@Named
@ApplicationScoped
public class ImageStreamer {

    @Inject
    private ImageService service;

    public byte[] getById(Long id) {
        return service.getContent(id);
    }

}

<o:graphicImage value="#{imageStreamer.getById(bean.image.id)}" />

It by default forces the browser to not cache the image, so the image will be downloaded on every request. For efficiency, a lastModified attribute can be set to allow browsers to cache the image as long as the image is unchanged as per lastModified value.

<o:graphicImage value="#{imageStreamer.getById(bean.image.id)}" lastModified="#{bean.image.lastModified}" />