Step by step guide for adding dynamic images from database to jasper report

Introduction

Reason we land-up here is to get answers to the question like:

• How to add dynamic image from database in jasper report?
• How to get image from database on to jasper report?
• How to get image stored in bites to jasper report? 
• etc ... 

Most of the time images are stored in database with predefined data type [binary, blob, Image]. Retrieving such images to the jasper report is one of the most common and confusing task encountered in dynamic reporting implementation process. Following article will provide you a guide to resolve this need with simple steps.   

Note: It is considered that user referring this document have basic knowledge of creating simple jasper reports with iReport tool.

So here we go:

Prerequisite:

1. iReport 4.5.1
2. Sql database with demo table

       Exa:

       User_Name -> [nvarchar]

       USer_Photo -> [Image]

         

Step 1: [ Create Blank Report ]

• Open iReport tool [ i am using iReport version 4.5.1]
• Go to File -> New
• [ 1. Choose Template ]: In New File window select “Blank A4”(A) and click on “Lunch report wizard”(B) button

• [ 2. Name and Location ]: Specify report name, Location to save on hard disk, Then click next.

• [ 3. Query ]: At this step you need to provide Connection/data source(you an select from drop down list (A) OR can create new from "New" Button (B)). Then you need to specify the query which will be retrieving data from required table (Query can be written manually (C) OR can be crated with "Design Query" (D) wizard) and click next.

• [ 4. Fields ] Select fields to be added in report (click ">>" (A)).Click next

• [ 5. Group By...] you can use this section to group clause for your data,(it is optional for this demo) click next and then on new window click Finish.

Step 2: [ Field Configuration ]

• After step 1 you will land-up in IDE with your report open in designer view. To the left you can see fields that you fetched from data base (A) and page design components(B).

• As you know the User_Photo field is have data type Image in data base, Here while mapping iReport assign java.lang.Object class to it by default. As we want it to show image with image with image element present in iReport we have to change its field class to java.io.InputStream. [Now select User_Photo field go to window menu -> select Properties OR press ctrl+shift+7.]
• Go to properties and change Field class to java.io.InputStream

Step 3: [ Design Report ]

• Now drag and drop User_Name field from report inspector to Report designer view.

• Similarly drag and drop Image and Static Text element from palette.[in case palette window is not there press ctrl+shift+8. While dropping image element it will show new window to select file, just click cancel ]

• You can edit content in static text element and format it as per your need

• Now select image element (A), go to property window to select Image expression (B).

• Once you click button next to Image Expression, it will open new window. In new window bauble-click element which will provide data to display image [ here it will be "User_Photo"]. click OK

• Select Image element go to properties and change expression class from java.lang.String to java.io.InputStream

Step 4: [ Test Report ]

• Now click on preview tab to get report out-put 

• And here you have it. Your 1st report with dynamic image data from database.

Enjoy....

Tag : jasper, ireport, jasper report, dynamic image from database, image from database, image from database in jasper report, image in report, .jasper, dynamic jasper report with image