Tkinter Image Labels

Labels can be used to hold images. With the help of the two imports Image and ImageTk, we can open and load a wide variety of image types. (The inbuilt imaging library is not very good at opening different image types, which is why we are using Pillow to do it.)

Locate this line in your code:

imgLabelTabOne = tk.Label(tab1)

This is the line that creates a label called imgLabelTabOne. Just before this line, add the following two lines:

openImageTabOne = Image.open(path)
imgTabOne = ImageTk.PhotoImage(openImageTabOne)

The first line uses the Image library. This has a method called open. In between round brackets, you need the path and filename of your image.

You should see a red line under path, when you add the code. This is because path is a variable name we came up with, and we haven't yet added it to the code.

The second line uses the PhotoImage method of the ImageTk library we imported. This turns an image type into an object that the label can work with.

Now adapt your Label line from this:

imgLabelTabOne = tk.Label(tab1)

to this:

imgLabelTabOne = tk.Label(tab1, image=imgTabOne)

You're just adding an image parameter after a comma. The value after the equals sign is the image object we set up called imgTabOne.

Now we can set up the path variable.

 

Create a Photo Directory

Somewhere on your computer, create a folder called photos. If you're on Windows, you may want to create it in your Documents folder. If you're using Linux or a Mac, the Desktop should be fine. We're going to be pulling photos from this folder when we do the database stuff. So you'll need some images for your database project. Download this zip file:

Photos for Database Project (44 kilobytes)

Unzip the images in the folder and move them to your new photos directory. As well as the photos, there's a default image to use a placeholder. This one:

A default image to be used in the project

We'll use this default image if a photo can't be found.

Now open up your db_config file in PyCharm. In the blank file, set up a variable called PHOTO_DIRECTORY. As the value for this new variable, store the file path to your photos directory. In Windows, it might be something like this (the escape character "\" is used in front of a backslash):

PHOTO_DIRECTORY = "C:\\Users\\Your_Username_Here\\Documents\\photos\\"

On a Mac, the file path might be something like:

PHOTO_DIRECTORY = "/Users/ Your_Username_Here/Desktop/photos/"

On Linux it could be:

PHOTO_DIRECTORY = "/home/ Your_Username_Here/Desktop/photos/"

We can now create a path with this variable.

Scroll up to the top of your code, to just before the form = tk.Tk() line. Add the following two lines:

file_name = "default.png"

path = db_config.PHOTO_DIRECTORY + file_name

We're just using the variable from the db_config file and joining it to the file name default.png.

Your code should look like this:

Python code to set an image directory

Notice that the red line under path has disappeared

Run your program. When it starts up, you should see this:

Python Tkinter form with a label image

Our default image is a white circle with a diagonal line through it. That fact that it displays in the label means it's working OK.

We also have a label on tab two for an image. Scroll down your code and locate this line:

imgLabelTabTwo = tk.Label(tab2)

Just before this line, add the following:

openImageTabTwo = Image.open(path)
imgTabTwo = ImageTk.PhotoImage(openImageTabTwo)

These two lines are the same as before, except we're creating two new variables, openImageTabTwo and imgTabTwo. (We could have set up a function to deal with our image manipulation, and that would have saved us from the code duplication.)

Now add the image parameter to the label line:

imgLabelTabTwo = tk.Label(tab2, image=imgTabTwo)

Your code should look like this:

Python code to load an image into a Tkinter label

Run your program again. Click on tab2 and, if everything went well, you should see that the default image is loaded:

Tkinter form showing an image in a label

 

Now that we have a user form, we can make a start connecting to our database table. We'll do that in the next lesson.

Connect to a Database with Python >