p:graphicImage tag in JSF Primefaces. Example code for displaying dynamic images.

In this tutorial, let us see that how to render images in browser using Primefaces <p:graphicImage> tag. This tag allows you to render images  of any static image file or dynamically generated images or images stored in a database. The <p:graphicImage> tag of Primefaces is converted to html <img> tag when the user requests any jsf page having this tag.

Now let us see how this tag is used to render images.

1. Rendering images of any static image file

For rendering static image file, you need to mention the path of the image file in the URL attribute.

<p:graphicImage url=”/resources/images/test.jpg” />

2. Rendering dynamically generated images or images stored in a database:

<p:graphicImage> is capable of rendering binary data  (streamed content). The below statement renders binary data as image in the browser.

<p:graphicImage value=”#{imageBean.image}”/>
<p:graphicImage value=”#{imageBean.imageFromDB}”/>

where image and imageFromDB are properties of managed bean that return streamed content.

Now Let us see an example   for rendering the image generated at run time and the image stored in a database.

Technology used in the project:

JSF 2.2

Primefaces 5.2

Eclipse

Apache Tomcat V7.0

MySQL

Java 1.7

I) Creating  a JSF page  rendering images.

JSF Page (GraphicImageExample.xhtml)

The above JSF page renders 3 images using <p:graphicImage> tag.
1. image of a static image file.
2. image generated at run time
3. image stored in a database
Now let us write managed bean code associated with the components of the above JSF page

II) Write Managed Bean code for the JSF page

Managed Bean (GraphicsImage.java):

Manage Bean has two getter methods.

1. getImage() – The original image is read from a static file, scaled at run time and returned as streamd content.

2. getImageFromDB() – The image is read from the DB as bytes and returned as stream content.
The complete code of managed bean is given below.

 

III) Write DAO code for accessing database and retrieving binary data (image) using product code.

Database Access code (ProductImageDAO.java)

 

Prerequisites for this project:
  1. Place an image file (test.jpg) under WebContent/images folder
  2. Create a table (Product) with the following fields in MySQL

+————–+————–+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+————–+————–+——+—–+———+——-+
| productId | varchar(10) | NO | PRI | NULL | |
| productName | varchar(100) | NO | | NULL | |
| productImage | mediumblob | YES | | NULL | |
+————–+————–+——+—–+———+——-+

Add product details with Image.

For example,

productId : I1

prodcutName : Samsung LED TV

productImage : binary data  to be uploaded in blob field

For uploading binary file and storing in MySQL table, you can visit my earlier tutorial Storing PDF file in MySQL table

 

Run the application by calling the URL

localhost:8080/JSFExamples/faces/GraphicImageExample.xhtml

Now 3 images are displayed.  Second one is the scaled image of first one.

graphicImage example

Reference: GraphicImage

You may also like

Leave a Reply

1 Comment on "p:graphicImage tag in JSF Primefaces. Example code for displaying dynamic images."


Guest
VK
7 months 23 days ago

Nice