Java programming tutorial with Official Hord - Retrieving Image from database into Label

What Will I Learn?

• You will learn to add an Image column to your database
• You will learn to collect image from database on table click
• You will learn to set image as icon for jLabel

Requirements

• Netbeans IDE
• XAMPP Server
• Basic Knowledge of Java Methods

Difficulty

• Intermediate

Tutorial Contents

Hi guys, from our last tutorial, I explained how to retrieve data from the database and display in text field. This time I'll be explaining how to display a picture that has been uploaded in the database using Image Icon on a jLabel.

---

Database

To begin with, we'll be adding the Image column to the database first, follow these steps careful.

1. Add Column, after connecting your Xampp Server and Opening your Table. Set Column name to desired name and Type to LongBlob. Long blob allows you to save Attachments of up to 4,294,967,295 bytes in length. Click save
   
2. Click on Insert and CLick Choose File to select the Image you want to Upload, then fill other rows with any data you like.

---

Program

First we add a label to our jFrame Form, this label will hold the image from the database, so rename it to your choice, I have called mine photo. After renaming, right click on the label and go to properties, where you can now set horizontal and vertical size to 150 as seen in the screenshot.

Now we import ImageIcon Class from Java Swing Library. Using import javax.swing.ImageIcon;, then declare a global variable called format, which would be of type ImageIcon ImageIcon format;. After all these has been done without any errors, we can now add the code to receive the uploaded Image and resize to the same size as the label we have placed in the program for it.

 byte[] image = rs.getBytes("photo"); //This creates an array of bytes to collect Image from database, usually when a file is uploaded in the database,it is saved as an array of bytes which can be compiled back to its normal form when downloaded.
                format = new ImageIcon(image); //this creates an ImageIcon from the bytes array collected from the image in the database.

                Image img = format.getImage(); //this creates an Image, this would be used to carry out the resizing, as ImageIcon cannot be resized directly with this method.
                Image newimage = img.getScaledInstance(photo.getWidth(), photo.getHeight(), Image.SCALE_SMOOTH); // This resizes the Image using size from the label which we have placed in the program earlier.
                ImageIcon images = new ImageIcon(newimage); //this coverts the resized image to an iconImage

Now we set the icon of our label photo to the ImageIcon created using photo.setIcon(images);

Run the code and click on the row where the image has been added, you will see the image displayed and scaled to fit in the label added to the interface, as seen in the output screenshot below.

I hope you understood it all, If not you can ask questions in comments.

Related Videos

• Java programming tutorial with Official Hord - Retrieving data from database into text field with TableClick
• Java programming tutorial with Official Hord - Connecting to Database and Retrieving data to Table

---

Posted on Utopian.io - Rewarding Open Source Contributors

---