Tkinter: How to display image
Example images
At start few images which I use in examples. They can be useful to test examples.



Read image using tkinter.PhotoImage()
Tkinter uses PhotoImage to read PNG, GIF or PGM/PPM but it can't read JPG or other formats. Older versions didn't read PNG.
import tkinter as tk root = tk.Tk() img = tk.PhotoImage(file="smile-1.png") # ... TODO: display image ... root.mainloop()
tkinter.PhotoImage has to be created after tk.Tk() which inits some elements needed to read image.
tkinter.PhotoImage has to use named variable file=. If you skip this name then it tries to use it with data= which needs image as base64 string. More about base64 string in other post.
To read JPG or other formats you have to use module pillow. More at the end of this page.
Display image using Label
Tkinter can show PhotoImage with Label
import tkinter as tk root = tk.Tk() img = tk.PhotoImage(file="smile-1.png") label = tk.Label(root, img) label.pack() root.mainloop()
You can also assing PhotoImage to existing Label using
img = tk.PhotoImage(file="smile-1.png")
label["image"] = img
# or
label.config(image=img)
This way you can also change/replace image without creating new Label. You can do it in function executed by button or other widget, or by event with bind(), or using time with after().
import tkinter as tk # --- functions --- def on_click(): global current_img # inform function to assing value to external/global variable if current_img == img1: current_img = img2 else: current_img = img1 label["image"] = current_img # --- main --- root = tk.Tk() img1 = tk.PhotoImage(file="smile-1.png") img2 = tk.PhotoImage(file="smile-2.png") current_img = img1 label = tk.Label(root, image=current_img) label.pack() button = tk.Button(root, text="Change", command=on_click) button.pack() root.mainloop()
Using list with images it could work as image viewer.
Display image using Button
Tkinter` can show ``PhotoImage with Button
import tkinter as tk root = tk.Tk() img = tk.PhotoImage(file="smile-1.png") button = tk.Button(root, image=img) button.pack() root.mainloop()
You can assing PhotoImage to existing Button using
img = tk.PhotoImage(file="smile-1.png")
button["image"] = img
# or
button.config(image=img)
This way you can also change/replace image - ie. using button or other widget, or using event with bind(), or using time with after().
import tkinter as tk # --- functions --- def on_click(): global current_img # inform function to assing value to external/global variable if current_img == img1: current_img = img2 else: current_img = img1 button["image"] = current_img # --- main --- root = tk.Tk() img1 = tk.PhotoImage(file="smile-1.png") img2 = tk.PhotoImage(file="smile-2.png") current_img = img1 button = tk.Button(root, image=current_img, command=on_click, compound="top", text="Image") button.pack() root.mainloop()
Using list with images it could work as image viewer.
Display image using Canvas
Tkinter` can use ``PhotoImage with Canvas
import tkinter as tk root = tk.Tk() img = tk.PhotoImage(file="smile-1.png") canvas = tk.Canvas(root) canvas.pack() img_id = canvas.create_image((0, 0), image=img, anchor='nw') root.mainloop()
It needs position (x, y) for image. Position (0, 0) is in top left corner. As default it puts center of image in this position (x, y) but you can change it with anchor=. If you use anchor="nw" (nw = North West = Top Left) then it puts top left corner of image in position (x, y).
create_image() gives id of object created on canvas and you can use it with other functions to replace, remove or move image.
import tkinter as tk import random # --- functions --- def on_click(): x = random.randint(0, 250) y = random.randint(0, 250) canvas.moveto(img_id, x, y) # --- main --- root = tk.Tk() img = tk.PhotoImage(file="smile-1.png") canvas = tk.Canvas(root) canvas.pack() img_id = canvas.create_image((0, 0), image=img, anchor='nw') button = tk.Button(root, text="move", command=on_click) button.pack() root.mainloop()
Using list with images it could work as image viewer.
Using buttons and/or after() it can create animation or game.
import tkinter as tk import random # --- functions --- def move_image(): dx = random.randint(-10, 10) dy = random.randint(-10, 10) canvas.move(img_id, dx, dy) # move image again after 100ms (0.1s) root.after(100, move_image) # --- main --- root = tk.Tk() img = tk.PhotoImage(file="smile-1.png") canvas = tk.Canvas(root) canvas.pack() img_id = canvas.create_image((100, 100), image=img) # move image first time #root.after(100, move_image) move_image() root.mainloop()
Display image with text using Label or Button
When Label or Button displays image then it doesn't show text.
To display text and image at the same time it needs compound= to define where should be shown image left, right, top, bottom or center to draw text on image.
label = tk.Label(root, text="Image", image=img, compound="top")
button = tk.Butoon(root, text="Button", image=img, compound="top")
import tkinter as tk root = tk.Tk() img = tk.PhotoImage(file="smile-1.png") label = tk.Label(root, image=img, text='Hello') label.pack() label = tk.Label(root, image=img, text='left', compound='left') label.pack() label = tk.Label(root, image=img, text='right', compound='right') label.pack() label = tk.Label(root, image=img, text='top', compound='top') label.pack() label = tk.Label(root, image=img, text='bottom', compound='bottom') label.pack() label = tk.Label(root, image=img, text='center', compound='center', fg='red') label.pack() root.mainloop()

Read image using ImageTk.PhotoImage()
To read JPG or other formats you have to use ImageTk.PhotoImage() from module pillow. Of course you may use it also to read PNG, GIF.
import tkinter as tk from PIL import ImageTk root = tk.Tk() img = ImageTk.PhotoImage(file="smile-1.png") label = tk.Label(root, image=img) label.pack() root.mainloop()
ImageTk.PhotoImage has to be created after tk.Tk() which inits some elements needed to read image.
ImageTk.PhotoImage has to also use named variable file= to read directly from file. If you skip this name then it tries to use with data= which needs pillow.Image which can be very useful. You can use pillow.Image to read image (even before tk.Tk()) and modify it before displaying. pillow has functions to resize, rotate, crop, convert colors, put one image on another, and even draw text or figures (with ImageDraw)
import tkinter as tk from PIL import Image, ImageTk image = Image.open("smile-1.png") image = image.resize((350, 350)).invert() root = tk.Tk() img = ImageTk.PhotoImage(image) label = tk.Label(root, image=img) label.pack() root.mainloop()
Bug in PhotoImage
There is bug in PhotoImage which removes image from memory (so it is not displayed) when it is assigned to local variable created in function or in class method.
PhotoImage has to be assigned to global variable
def function():
global img
img = tk.PhotoImage(file="smile-1.png")
or to variable in existing class instance
def function():
img = tk.PhotoImage(file="smile-1.png")
label = tk.Label(image=img)
label.image = img # it can be different name - ie. `label.img`
label.pack()
or using self. in class
class MyWindow:
def method(self):
self.img = tk.PhotoImage(file="smile-1.png")
Links:
- [web.archive.org] effbot.org: PhotoImage
- [web.archive.org] effbot.org: Label
- [web.archive.org] effbot.org: Button
- [web.archive.org] effbot.org: Canvas
