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