Primefaces - JSF | Menampilkan File Image Dinamis

Pada kesempatan kali ini, penulis akan membagikan cara menampilkan image dari database dengan format BLOB ke Primefaces / JSF. 

Seperti yang kita tahu, bahwa <p: graphicImage> pada primefaces sebenarnya membuat sebuah <img src> elemen dengan URL. URL ini berisi sebuah ID unik dan disimpan dalam sesi HTTP dari pengguna. Browser menginterpret halaman html dan meminta isi gambar berdasarkan URL yang ditemukan pada atribut src. Jadi, kita tidak bisa langsung memasukkan streamedcontent parameter pada getter beannya. Sehingga, kita membutuhkan <f:param> berisi ID dari gambar yang akan dibaca oleh bean.

berikut contoh potongan code pada file HTML nya :

<p:dataTable value="#{bean.items}" var="item">
    <p:column>
        <p:graphicImage value="#{imageStreamer.image}">
            <f:param name="id" value="#{item.imageId}" />
        </p:graphicImage>
    </p:column>
</p:dataTable>

#{item.imageId} merupakan nilai ID image dari database (primary key) dan bukan byte[]. 
Berikut contoh potongan code untuk bean class ImageStreamer:

@ManagedBean
@ApplicationScoped
public class ImageStreamer {

    @EJB
    private ImageService service;

    public StreamedContent getImage() throws IOException {
        FacesContext context = FacesContext.getCurrentInstance();

        if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
            // So, we're rendering the HTML. Return a stub StreamedContent so that it will generate right URL.
            return new DefaultStreamedContent();
        } else {
            // So, browser is requesting the image. Return a real StreamedContent with the image bytes.
            String imageId = context.getExternalContext().getRequestParameterMap().get("imageId");
            Image image = imageService.find(Long.valueOf(imageId));
            return new DefaultStreamedContent(new ByteArrayInputStream(image.getBytes()));
        }
    }

}

Sedangkan class Image merupakan @Entity dengan sebuah @Lob bytes[] property.

@Entity
public class Image {

    @Id
    @GeneratedValue(strategy = IDENTITY) // Depending on your DB, of course.
    private Long id;

    @Lob
    private byte[] bytes;

Demikian cara untuk menampilkan gambar pada JSF - Primefaces secara dinamis. Konsep tersebut juga dapat dilakukan jika Anda ingin membuat datatable yang berisi gambar secara dinamis.