Image not displaying in Tkinter Label widget - python

I'm trying to get an image to display in a Tkinter Label widget. This code works inside a class in PyCharm, but doesn't get past the 'tk.Label' line in the main app. I've consulted other answers here but haven't been able to figure out why the image isn't displaying in the main app.
logo_filepath = "/Users/xxx/MASTER/pymol/Master/cache/logos/tmpbhWv2Ts.gif"
self.img = tk.PhotoImage(file = logo_filepath)
self.logo = tk.Label(self, image=self.img)
self.logo.photo = self.img
self.logo.grid(row=0, column=3, rowspan=10, columnspan=4)

It's a very simple error. Just make sure that you aren't defining self.[Your Variable] outside of a class. Because self is only available in classes. Also, Here's my code:
import Tkinter as tk
root = tk.Tk()
logo_filepath = "Your File Path..."
img = tk.PhotoImage(file = logo_filepath)
logo = tk.Label(root, image=img)
logo.photo = img
logo.grid(row=0, column=3, rowspan=10, columnspan=4)
tk.mainloop()

Related

Add Image to Tkinter Class

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:
However, I can only get the converter to work with this version using a Class:
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.
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.
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)

How to show image in tkinter using pillow with OOP

I am making a program where I need to at some point display an image onto a frame at the press of a button. I am using an object oriented approach but it won't display the image. If I do something like:
from tkinter import *
from PIL import Image, ImageTk
root = Tk()
pic = Image.open("image.jpg")
tkpic = ImageTk.PhotoImage(pic)
label = Label(root, image=tkpic)
label.pack()
root.mainloop()
that works fine. But if I create a frame and try to display the picture like this:
from tkinter import *
from PIL import Image, ImageTk
class picframe(Frame):
def __init__(self, parent):
Frame.__init__(self, parent)
button = Button(self, text="show", command=self.showpic)
button.pack()
def showpic(self):
pic = Image.open("image.jpg")
tkpic = ImageTk.PhotoImage(pic)
label = Label(self, image=tkpic)
label.pack()
root = Tk()
frame = picframe(root)
frame.pack()
root.mainloop()
When I press the button it expands the window as if it was trying to display the image but nothing shows up it just becomes a wider window. So what am I doing wrong?
Thank you in advance!
As the picture is created in a function the reference tkpic will be garbage collected when the function exits. You need to save a reference to the image:
def showpic(self):
pic = Image.open("image.jpg")
tkpic = ImageTk.PhotoImage(pic)
label = Label(self, image=tkpic)
label.image = tkpic # Save reference to image
label.pack()
Alternatively you can ensure the persistance of the image reference by making it an instance variable:
def showpic(self):
pic = Image.open("images/beer.png")
self.tkpic = ImageTk.PhotoImage(pic)
label = Label(self, image=self.tkpic)
label.pack()

How can I update the photo within a button using radio buttons?

I'm currently trying to learn how to build GUIs with tkinter, and I've run into a problem with my test app.
I have a button that displays an image on it instead of text, and I also have a set of radio buttons that I want to control which image is shown on the regular button. Currently the radio buttons don't seem to be updating my photofilepath StringVar as the button always has the default photo, regardless of selected radio button. Here is my (Simplified) code:
root = Tk() # Set up
root.title("Test GUI")
gui.grid(column=0, row=0, sticky=(N, W, E, S))
photofilepath = StringVar() # Set default photo
photofilepath.set("C:/Users/Ben/Pictures/Default photo.png")
photo = PhotoImage(file=photofilepath.get())
CalcButton = ttk.Button(gui, image=photo)
CalcButton.grid(column=3, row=2, columnspan=1)
# Set button photo
Photo1Rbutton = ttk.Radiobutton(gui, text="Photo 1", variable=photofilepath,
value='C:/Users/Ben/Pictures/Photo 1.png')
Photo1Rbutton.grid(column=4, row=2, sticky=S)
Photo2Rbutton = ttk.Radiobutton(gui, text="Photo 2", variable=photofilepath,
value='C:/Users/Ben/Pictures/Photo 2.png')
Photo2Rbutton.grid(column=4, row=3)
root.mainloop()
Thanks in advance for any help.
You can use command= in Radiobutton to assign function which will load new image and put them in label.
Working example (you have to only set paths)
import tkinter as tk
from tkinter import ttk
# to easily change example
DEFAULT = "C:/Users/Ben/Pictures/Default photo.png"
PHOTO_1 = "C:/Users/Ben/Pictures/Photo 1.png"
PHOTO_2 = "C:/Users/Ben/Pictures/Photo 2.png"
def change_image():
print(photo_filepath.get())
photo = tk.PhotoImage(file=photo_filepath.get())
calc_button['image'] = photo
calc_button.image = photo # solution for garbage-collector problem. you have to assign PhotoImage object to global variable or class variable
# - or -
photo['file'] = photo_filepath.get()
calc_button['image'] = photo
root = tk.Tk() # Set up
root.title("Test GUI")
photo_filepath = tk.StringVar() # Set default photo
photo_filepath.set(DEFAULT)
photo = tk.PhotoImage(file=photo_filepath.get())
calc_button = ttk.Button(root, image=photo)
calc_button.grid(column=3, row=2, columnspan=1)
photo1_radiobutton = ttk.Radiobutton(root, text="Photo 1", variable=photo_filepath,
value=PHOTO_1, command=change_image)
photo1_radiobutton.grid(column=4, row=2, sticky=tk.S)
photo2_radiobutton = ttk.Radiobutton(root, text="Photo 2", variable=photo_filepath,
value=PHOTO_2, command=change_image)
photo2_radiobutton.grid(column=4, row=3)
root.mainloop()

tkinter image button not working inside a function [duplicate]

I am trying to place two image buttons on my image background in a certain position, but my buttons are not appearing. I think their images are behind the background.
I tried to use place and pack, both did not work. What could be the problem?
from tkinter import*
import tkinter as tk
import settings
class Application(Frame):
def __init__ (self, master):
Frame.__init__(self,master)
self.grid()
self.create_widgets()
def create_widgets(self):
button1 = PhotoImage(file ="button1.gif")
button2 = PhotoImage(file ="button2.gif")
settings_button = Button(self, image = button1,
command = self.mult_command, width = 15)
settings_button.place(x=1, y=1)
rules_button = Button(self, image = button2,
command = self.the_rules, width = 15)
rules_button.place(x=50, y=50)
def main_code():
window = Tk()
window.title("The Bouncer")
bg_image = PhotoImage(file ="pic.gif")
x = Label (image = bg_image)
x.image = bg_image
x.place(x = 0, y = 0, relwidth=1, relheight=1)
window.geometry("600x300")
app = Application(window)
window.mainloop()
main_code()
thanks
It is likely that your image is being garbage collected before it is displayed. This is a common Tkinter gotcha. Try changing the lines:
button1 = PhotoImage(file ="button1.gif")
button2 = PhotoImage(file ="button2.gif")
to
self.button1 = PhotoImage(file ="button1.gif")
self.button2 = PhotoImage(file ="button2.gif")
and use
settings_button = Button(self, image = self.button1, command = self.mult_command, width = 15)
etc.
This should keep a reference to your image, stopping it from getting garbage collected.
In addition to keeping a reference to the image, you have a problem with this line:
self.grid()
in the __init__ method of Application. It's gridding the Frame into the window, but since nothing is ever packed or gridded into the frame, it doesn't ever expand past a little, tiny frame, so you just don't see the Buttons inside it. A simple fix here would be the pack method, with arguments to fill the window and expand when needed:
self.pack(fill=BOTH, expand=1)

Why my image buttons are not appearing?

I am trying to place two image buttons on my image background in a certain position, but my buttons are not appearing. I think their images are behind the background.
I tried to use place and pack, both did not work. What could be the problem?
from tkinter import*
import tkinter as tk
import settings
class Application(Frame):
def __init__ (self, master):
Frame.__init__(self,master)
self.grid()
self.create_widgets()
def create_widgets(self):
button1 = PhotoImage(file ="button1.gif")
button2 = PhotoImage(file ="button2.gif")
settings_button = Button(self, image = button1,
command = self.mult_command, width = 15)
settings_button.place(x=1, y=1)
rules_button = Button(self, image = button2,
command = self.the_rules, width = 15)
rules_button.place(x=50, y=50)
def main_code():
window = Tk()
window.title("The Bouncer")
bg_image = PhotoImage(file ="pic.gif")
x = Label (image = bg_image)
x.image = bg_image
x.place(x = 0, y = 0, relwidth=1, relheight=1)
window.geometry("600x300")
app = Application(window)
window.mainloop()
main_code()
thanks
It is likely that your image is being garbage collected before it is displayed. This is a common Tkinter gotcha. Try changing the lines:
button1 = PhotoImage(file ="button1.gif")
button2 = PhotoImage(file ="button2.gif")
to
self.button1 = PhotoImage(file ="button1.gif")
self.button2 = PhotoImage(file ="button2.gif")
and use
settings_button = Button(self, image = self.button1, command = self.mult_command, width = 15)
etc.
This should keep a reference to your image, stopping it from getting garbage collected.
In addition to keeping a reference to the image, you have a problem with this line:
self.grid()
in the __init__ method of Application. It's gridding the Frame into the window, but since nothing is ever packed or gridded into the frame, it doesn't ever expand past a little, tiny frame, so you just don't see the Buttons inside it. A simple fix here would be the pack method, with arguments to fill the window and expand when needed:
self.pack(fill=BOTH, expand=1)

Categories