Python, how to set image to ttk.notebook tab

Question

How to set image on tab in ttk.notebook tabs ?

The following code isn't working, the image doesn't appear:

import tkinter as tk
from tkinter import ttk

class Tab(tk.Frame):
    def __init__(self, master, *args, **kwargs):
        super().__init__(master, *args, **kwargs)
        self.label = tk.Label(self, text='Blablablee')
        self.label.pack()

root = tk.Tk()
notebook = ttk.Notebook(root)
notebook.pack()
notebook.add(Tab(notebook), 
             text='Tab1', 
             image=tk.PhotoImage(file='icon.png'), 
             compound='left')
root.mainloop()

the formats that can be understood by tk's PhotoImage class are limited, try using PIL to open the image instead — James Kent, May 21 '18 at 12:46

score 3 · Answer 1 · answered May 21 '18 at 13:02

3

as a complete example:

import tkinter as tk # global imports are bad
from tkinter import ttk
from PIL import Image, ImageTk

root = tk.Tk()
nb = ttk.Notebook(root)
nb.pack(fill='both', expand=True)

f = tk.Frame(nb)
tk.Label(f, text="in frame").pack()

# must keep a global reference to these two
im = Image.open('path/to/image')
ph = ImageTk.PhotoImage(im)

# note use of the PhotoImage rather than the Image
nb.add(f, text="profile", image=ph, compound=tk.TOP) # use the tk constants

root.mainloop()

for reference i tested this to work with a gif file where the builtin PhotoImage failed, and gif is one of the supported formats.

answered May 21 '18 at 13:02

James Kent

5,763
26
50

i think no need to call PIL in backup, you just have to define the image object before passing it as a parameter in the method `add` – PRMoureu May 21 '18 at 13:07
as i put at the bottom, using the same image i tried using the builtin class and it did not work. not to mention i do not believe png is a format supported by tkinters PhotImage class. – James Kent May 21 '18 at 13:08
1

Maybe it's better with PIL, but i've just managed to make it work with `PhotoImage` and a png, by creating the image before. – PRMoureu May 21 '18 at 13:14
in which case i stand corrected, i didn't think PNG was supported. – James Kent May 21 '18 at 13:47
it seems to be a platform problem, linux looks more tolerant, this post exposed the same issue : https://stackoverflow.com/questions/27599311/tkinter-photoimage-doesnt-not-support-png-image – PRMoureu May 21 '18 at 13:58
it also appears that newer Tk (8.6) is supposed to add support for png on windows? but again i tested using 8.6 on my windows box, no traceback but no image either... not too much of an issue as i generally end up using pillow anyway – James Kent May 21 '18 at 15:01

Acamori · Accepted Answer · 2018-05-22T13:27:08.657

@James Kent, PRMoureu ty for help. It's was my fault, all works properly, even without PIL.

from tkinter import *
import tkinter.ttk as ttk

root = Tk()

notebook = ttk.Notebook(root)
notebook.pack()

frame_main = Frame()
frame_profile = Frame()

prof_img = Photoimage(file=r'D:\my_app\img\contact.png')

notebook.add(frame_main, text='Main')
notebook.add(frame_profile, text='Profile', image=prof_img, compound=TOP)

root.mainloop()

score 0 · Answer 3 · answered May 18 '20 at 20:39

0

import tkinter as tk
from tkinter import ttk

class Tab(tk.Frame):
   def __init__(self, master, *args, **kwargs):
       super().__init__(master, *args, **kwargs)
       self.label = tk.Label(self, text='Blablablee')
       self.label.pack()

root = tk.Tk()
notebook = ttk.Notebook(root)
notebook.pack()
img = tk.PhotoImage(file='icon.png')
notebook.add(Tab(notebook), 
         text='Tab1', 
         image=img, 
         compound='left')
root.mainloop()

answered May 18 '20 at 20:39

crispengari

7,901
7
45
53

Create an image variable first then equate the image option to that variable and try again – crispengari May 18 '20 at 20:40

Python, how to set image to ttk.notebook tab

3 Answers3