U kunt <p:graphicImage>
gebruiken
om afbeeldingen weer te geven die zijn opgeslagen in een byte[]
, ongeacht de byte[]
bron (DB, schijfbestandssysteem, netwerk, enz.). Eenvoudigste voorbeeld is:
<p:graphicImage value="#{bean.streamedContent}" />
die verwijst naar een StreamedContent
eigendom.
Dit heeft echter een valkuil, vooral bij gebruik in een itererende component zoals een datatabel:de gettermethode wordt twee keer aangeroepen; de eerste keer door JSF zelf om de URL te genereren voor <img src>
en de tweede keer via webbrowser wanneer het de afbeeldingsinhoud moet downloaden op basis van de URL in <img src>
. Om efficiënt te zijn, zou u de DB niet moeten raken in de eerste getter-aanroep. Om de getter-methodeaanroep te parametriseren, zodat u een generieke methode kunt gebruiken waarin u een specifieke afbeeldings-ID doorgeeft, moet u een <f:param>
gebruiken (houd er rekening mee dat de EL 2.2-functie voor het doorgeven van methodeargumenten helemaal niet werkt, omdat dit niet in de URL van <img src>
terechtkomt !).
Samengevat zou dit het volgende moeten doen:
<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>
De #{item.imageId}
retourneert uiteraard de unieke identifitier van de afbeelding in de DB (de primaire sleutel) en dus niet de byte[]
inhoud. De #{imageStreamer}
is een bean met toepassingsbereik die er als volgt uitziet:
@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()));
}
}
}
De Image
class is in dit specifieke voorbeeld slechts een @Entity
met een @Lob
op bytes
property (aangezien je JSF gebruikt, ga ik er natuurlijk van uit dat je JPA gebruikt om met de DB te communiceren).
@Entity
public class Image {
@Id
@GeneratedValue(strategy = IDENTITY) // Depending on your DB, of course.
private Long id;
@Lob
private byte[] bytes;
// ...
}
De ImageService
is gewoon een standaard @Stateless
EJB, niets bijzonders te zien hier:
@Stateless
public class ImageService {
@PersistenceContext
private EntityManager em;
public Image find(Long id) {
return em.find(Image.class, id);
}
}