Add Image to Tkinter Class

Question

I've created a Tkinter app to convert the mailing lists we use at my company. All the functionality seems to work fine I just can't get the logo image to work!

I have created an app without using a Class and it is exactly how I'd want it.

The way I'd want the app to look:

The way I'd want the app to look

However, I can only get the converter to work with this version using a Class:

Current working version:

Current working version

The code for the working version is below (the one without any logo), I've excluded all the excel conversion code as it's quite long.

import tkinter as tk


class Window(tk.Frame):

    def __init__(self, master=None):
        tk.Frame.__init__(self, master)
        self.master = master
        self.init_window()

    def init_window(self):
        self.master.title("SPB Mailing List Cleaner")
        self.pack(fill='both', expand=1)

        self.filepath = tk.StringVar()

        convertButton = tk.Button(self, text='Convert',
                                  command=self.convert, bg="#00a69d", fg="white", height="2", width="15")
        convertButton.place(x=242, y=200)

        filepathText = tk.Entry(self, textvariable=self.filepath)
        filepathText.pack()
        filepathText.place(x=237, y=250)

    def convert(self):
        pass  # left out code

    def show_file_browser(self):
        self.filename = filedialog.askopenfilename()
        return self.filename

    def first_browser(self):
        file = self.show_file_browser()
        self.filepath.set(file)

form = tk.Tk()
form.geometry("600x300")
form.resizable(0, 0)

app = Window(form)

form.mainloop()

This is the code for the image in the first screenshot (the one with the logo) ('The way I'd want the app to look').

import tkinter as tk
from PIL import Image, ImageTk
from tkinter.filedialog import askopenfile
from tkinter import filedialog as fd
import os
root = tk.Tk()

canvas = tk.Canvas(root, width = 600, height = 300)
canvas.grid(columnspan=3, rowspan=3)


#logo
logo = Image.open('logo.png')
logo = ImageTk.PhotoImage(logo)
logo_label = tk.Label(image = logo)
logo_label.image = logo
logo_label.grid(column=1, row=0)

#instructions
instructions = tk.Label(root, text="Select an appropriate '.xlsx' file for cleaning.")
instructions.grid(columnspan=3, column=0, row=1)


def open_file():
    browse_text.set("loading...")
    file = askopenfile(initialdir=os.path.normpath("C://"), parent=root, mode='rb', title="Choose a file", filetypes=[("Excel files", ".xlsx .xls")])
    if file:
        print(file.name)


#browse button
browse_text = tk.StringVar()
browse_btn = tk.Button(root, textvariable=browse_text, command=lambda:open_file(), bg="#00a69d", fg="white", height="2", width="15")
browse_text.set("Select File")
browse_btn.grid(column=1, row=2)

canvas = tk.Canvas(root, width = 600, height = 150)
canvas.grid(columnspan=3)



root.mainloop()

The question is how do I get the logo to work with the version that doesn't have a logo, i.e make the image work within a class.

I would really appreciate any feedback/help on this. I had a look at some posts that describe a similar issue but I'm quite new to coding so can't wrap my head around it all.

Please provide a complete [mcve]. It's unclear where or if the code that creates the image is actually running. — Bryan Oakley, Mar 27 '22 at 14:45
The question is just basically, how do I get the 2nd screenshot to display like the first? — izajjj, Mar 27 '22 at 15:39
No, this isn't a MRE. You provided a block of code just floating out in space, with no connection to the rest of the code. — Bryan Oakley, Mar 27 '22 at 15:42
This question isn't clear. You seem to know how to create an image. What's stopping you from adding the second block of code to the first block? — Bryan Oakley, Mar 27 '22 at 15:51
I don't know how that would work within a class? Could you answer this for me? — izajjj, Mar 27 '22 at 16:00
Does this answer your question? [Why does Tkinter image not show up if created in a function?](https://stackoverflow.com/questions/16424091/why-does-tkinter-image-not-show-up-if-created-in-a-function) — Faraaz Kurawle, Mar 27 '22 at 18:14

Faraaz Kurawle · Answer 1 · 2022-03-28T04:00:50.287

Things you have to do:

load the image in class.
Currently Tkinter only supports , the GIF, PGM, PPM, and PNG file formats as of Tkinter 8.6

To support other file formats such as PNG,JPG, JPEG, or BMP, you can use an image library such as Pillow to convert them into the supported format.

image = Image.open('./assets/python.jpg')
python_image = ImageTk.PhotoImage(image)

self.label=Label(image=python_image)

The another solution is to use to make the image variable a class variable by adding self. so final thing would look like self.img_var_name=image.

Alternatively you can append the images in a list, or use

image = image)

The goals is to increase the refrence count of image variable.

See Why does Tkinter image not show up if created in a function? for more details.

score -1 · Answer 2 · answered Mar 28 '22 at 07:52

I just had to put the image code inside the init_window function.

def init_window(self):

        #logo
        logo = Image.open('logo.png')
        logo = ImageTk.PhotoImage(logo)
        logo_label = tk.Label(image = logo)
        logo_label.image = logo
        logo_label.place(x=160, y=20)

        #instructions
        instructions = tk.Label(form, text="Select an appropriate '.xlsx' file for cleaning.")
        instructions.place(x=180, y=280)

        self.master.title("SPB Mailing List Cleaner")
        self.pack(fill = 'both', expand = 1)

        self.filepath = tk.StringVar()


        convertButton = tk.Button(self, text = 'Convert',
                               command = self.convert, bg="#00a69d", fg="white", height="2", width="15")
        convertButton.place(x = 242, y = 200)

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Mar 28 '22 at 10:07

Add Image to Tkinter Class

2 Answers2