Tkinter: Problem when adding photos to the buttons

Question

Hi guys my problem is when I add an image to the button like an icon it shows an empty box, and also how can I put a background photo in every frame? I am new to OOP.

    import tkinter as tk
    from tkinter import ttk 
    from PIL import ImageTk, Image
    
    LARGE_FONT = ("Calibri", 12)

    class Gui(tk.Tk):
        def __init__(self, *agrs, **kwargs):
            tk.Tk.__init__(self, *agrs, **kwargs) #initialize tkinter
    
            tk.Tk.title(self, "COVID-19 Tracker") #Front Window Title
            tk.Tk.geometry(self, '400x600') #pixels 
            tk.Tk.iconbitmap(self, 'Images/covid19-logo.ico')
    
            container = tk.Frame(self)
            container.pack(side="top", fill="both", expand = True)
            container.grid_rowconfigure(0, weight=1)
            container.grid_columnconfigure(0, weight=1)
    
            self.frames = {}
            #Loop to access different frames
            for x in (StartPage, PageOneUser, PageOneAdmin, PageOneSignUp, PageTwoSignUp):
                frame = x(container, self)
                self.frames[x] = frame
                frame.grid(row=0, column=0, sticky="nsew")
    
            self.show_frame(StartPage)
    
        def show_frame(self, cont):
            frame = self.frames[cont]
            frame.tkraise()

class StartPage(tk.Frame):
    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)

        #Icons 
        user_image = tk.PhotoImage(file='Images/user_button.png')
        show_image = tk.Label(self, image=user_image)
        admin_image = tk.PhotoImage(file='Images/admin_button.png')
        signup_image = tk.PhotoImage(file='Images/signup_button.png')
        about_image = tk.PhotoImage(file='Images/about_button.png')


        # Background Photo
       
        #Widgets
        user_button = tk.Button(self, text="USER", image=user_image,
            command=lambda: controller.show_frame(PageOneUser))
        user_button.place(x=115, y=270)

        admin_button = tk.Button(self, text="ADMIN", 
            command=lambda: controller.show_frame(PageOneAdmin))
        admin_button.place(x=93, y=355)

        signup_button = tk.Button(self, text="SIGN", 
            command=lambda: controller.show_frame(PageOneSignUp))
        signup_button.place(x=129, y=440)

        about_button = tk.Button(self, text="ABOUT", 
            command=lambda: controller.show_frame(OpenAboutWindow))
        about_button.place(x=300, y=550)

# User Log In Form 
class PageOneUser(tk.Frame):
    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)

        #Widgets
        login_button = tk.Button(self, text="LOG IN", 
            command=lambda: controller.show_frame(UserDashboard))
        login_button.place(x=140, y=320)

        back_button = tk.Button(self, text="BACK", 
            command=lambda: controller.show_frame(StartPage))
        back_button.place(x=300, y=550)

        #Entry 
        # textvariable = get_varUsername
        username_entry = tk.Entry(self, width=30).place(x=109, y=210)

        password_entry = tk.Entry(self, width=30).place(x=109, y=280)

# Admin Log In Form
class PageOneAdmin(tk.Frame):
    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)

        #Widgets
        login_button = tk.Button(self, text="LOG IN", 
            command=lambda: controller.show_frame(UserDashboard))
        login_button.place(x=140, y=320)

        back_button = tk.Button(self, text="BACK", 
            command=lambda: controller.show_frame(StartPage))
        back_button.place(x=300, y=550)

        #Entry 
        username_entry =tk.Entry(self, width=30).place(x=109, y=210)

        password_entry = tk.Entry(self, width=30, show = '*').place(x=109, y=280)


# Personal Details and Log In Details
class PageOneSignUp(tk.Frame):
    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)

        #Widget
        next_button = tk.Button(self, text="NEXT", 
            command=lambda: controller.show_frame(PageTwoSignUp))
        next_button.place(x=300, y=550)

        back_button = tk.Button(self, text="BACK", 
            command=lambda: controller.show_frame(StartPage))
        back_button.place(x=30, y=550)

#Contact Tracing Form
class PageTwoSignUp(tk.Frame):
    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)

        #Widgets
        signup_button = tk.Button(self, text="SIGN UP", 
            command=lambda: controller.show_frame(StartPage))
        signup_button.place(x=260, y=540)

        back_button = tk.Button(self, text="BACK", 
            command=lambda: controller.show_frame(PageOneSignUp))
        back_button.place(x=30, y=550)

class OpenAboutWindow(tk.Frame):
    pass

class UserDashboard(tk.Frame):
    pass

app = Gui()
app.mainloop()

Answer 1

Using Python2.1.0rc3, Windows10

my problem is when I add an image to the button like an icon it shows an empty box, and also how can I put a background photo in every frame?

The problem can be fixed.

Add self. prefix for every Button widgets on class StartPage(tk.Frame):

Snippet:

    #Icons 
    self.user_image = tk.PhotoImage(file='p1.png')
    show_image = tk.Label(self, image=self.user_image)
    admin_image = tk.PhotoImage(file='p2.png')
    signup_image = tk.PhotoImage(file='p3.png')
    about_image = tk.PhotoImage(file='p4.png')


    # Background Photo
   
    #Widgets
    user_button = tk.Button(self, text="USER", image=self.user_image,
                            command=lambda: controller.show_frame(PageOneUser))

Screenshot:

Answer 2

try to use like this

this compound=RIGHT help you for position of text and icon

compound=RIGHT / LEFT

use left or Right

this is your code

    user_image = tk.PhotoImage(file='Images/user_button.png')
    user_button = tk.Button(self, text="USER", image=user_image,
        command=lambda: controller.show_frame(PageOneUser))
    user_button.place(x=115, y=270)

to change like this

    image_icon = tk.PhotoImage(file='Images/user_button.png')
    user_image = image_icon .subsample(3, 3)

    user_button = tk.Button(self, text="USER", image=user_image,compound=RIGHT,
        command=lambda: controller.show_frame(PageOneUser))
     user_button.place(x=115, y=270)

hope so this code will help you

OUTPUT :