How to get two images on separate frames using Canvas in tkinter?

Question

in the following code I am trying to put two images on two separate window frames using Canvas

PANEL_HEIGHT = 440
PANEL_WIDTH = 304
BKG_IMG = "./backgrounds/Wireframe- welcome screen – 1.png"
MANAGE_ACC_BKG_IMG = "./backgrounds/Wireframe- welcome screen – 1.png"

class window1:

    def __init__(self):
        self.panel = Tk()
        self.panel.geometry(f"{PANEL_WIDTH}x{PANEL_HEIGHT}")


        self.canvas = Canvas(self.panel,width=2*PANEL_WIDTH, height=2*PANEL_HEIGHT)
        canvas = self.canvas

        img = PhotoImage(file=BKG_IMG)
        canvas.create_image(PANEL_WIDTH,PANEL_HEIGHT,image=img)
        canvas.place(x=-(PANEL_WIDTH/2),y=-(PANEL_HEIGHT/2))

class window2:

    def __init__(self):
        self.panel = Tk()
        self.panel.geometry(f"{PANEL_WIDTH}x{PANEL_HEIGHT}")


        self.canvas = Canvas(self.panel, width=2 * PANEL_WIDTH, height=2 * PANEL_HEIGHT)
        canvas = self.canvas
        img = PhotoImage(file=MANAGE_ACC_BKG_IMG)
        canvas.create_image(PANEL_WIDTH, PANEL_HEIGHT, image=img)
        canvas.place(x=-(PANEL_WIDTH / 2), y=-(PANEL_HEIGHT / 2))

window1()
window2()

on calling these two classes I am getting "image 'pyimage2' doesn't exist" error

Absolute path of both the files are

D:\pyAut\pythonBootCamp\backgrounds\manage_acc_ui_bkg.png D:\pyAut\pythonBootCamp\main.py

could any body tell how to accomplish the task????

You're calling `Tk()` more than use (you have to use `Toplevel()` instead to create additional windows, and you aren't saving a reference to your PhotoImage objects (so they will be immediately garbage-collected). — jasonharper, Apr 24 '21 at 03:17
Search this site, there has been plenty questions already. Example: [my button in tkinter is not showing the image \[duplicate\]](https://stackoverflow.com/a/64768327/13382000) also [pyimage4 error while trying to set image to 2nd window](https://stackoverflow.com/a/63799551/13382000) — Delrius Euphoria, Apr 24 '21 at 06:09

score 1 · Answer 1 · answered Apr 24 '21 at 03:17

You have created Tk() twice: self.panel = Tk() avoid that. move self.panel = Tk() to outside to share: panel = Tk().

Please try it:

from tkinter import *  

PANEL_HEIGHT = 440
PANEL_WIDTH = 304
BKG_IMG = "./backgrounds/Wireframe- welcome screen – 1.png"
MANAGE_ACC_BKG_IMG = "./backgrounds/Wireframe- welcome screen – 1.png"

panel = Tk()
panel.geometry(f"{PANEL_WIDTH}x{PANEL_HEIGHT}")

class window1:

    def __init__(self):
        self.canvas = Canvas(panel,width=2*PANEL_WIDTH, height=2*PANEL_HEIGHT)
        canvas = self.canvas

        img = PhotoImage(file=BKG_IMG)
        canvas.create_image(PANEL_WIDTH,PANEL_HEIGHT,image=img)
        canvas.place(x=-(PANEL_WIDTH/2),y=-(PANEL_HEIGHT/2))

class window2:

    def __init__(self):
        self.canvas = Canvas(panel, width=2 * PANEL_WIDTH, height=2 * PANEL_HEIGHT)
        canvas = self.canvas
        img = PhotoImage(file=MANAGE_ACC_BKG_IMG)
        canvas.create_image(PANEL_WIDTH, PANEL_HEIGHT, image=img)
        canvas.place(x=-(PANEL_WIDTH / 2), y=-(PANEL_HEIGHT / 2))

window1()
window2()

no, this destroys the Tk() application as I cancels the first window, and it gives error — gyan mishra, Apr 24 '21 at 03:31

score 1 · Answer 2 · answered Apr 24 '21 at 14:04

Hope you are satisfied with the information given

import tkinter as tk
from PIL import ImageTk, Image

PANEL_HEIGHT = 440
PANEL_WIDTH = 304

main = tk.Tk()

BKG_IMG = "./backgrounds/Wireframe- welcome screen – 1.png"
MANAGE_ACC_BKG_IMG = "./backgrounds/Wireframe- welcome screen – 1.png"


class window1:
    window = tk.Toplevel(main)
    window.geometry(f"{PANEL_WIDTH}x{PANEL_HEIGHT}")
    window.title("Window 1")
    img = ImageTk.PhotoImage(Image.open(BKG_IMG))
    canvas = tk.Canvas(window, width=PANEL_WIDTH, height=PANEL_HEIGHT, background="white")
    canvas.pack()
    canvas.create_image(PANEL_WIDTH, PANEL_HEIGHT, image=img)


class window2:
    main.title("Window 2")
    main.geometry(f"{PANEL_WIDTH}x{PANEL_HEIGHT}")

    img = ImageTk.PhotoImage(Image.open(MANAGE_ACC_BKG_IMG))
    canvas = tk.Canvas(main, width=PANEL_WIDTH, height=PANEL_HEIGHT, background="white")
    canvas.pack()
    canvas.create_image(PANEL_WIDTH, PANEL_HEIGHT, image=img)


window1()
window2()

main.mainloop()

Michael Stevens · Answer 3 · 2021-04-24T13:32:18.197

Firstly the PhotoImage of tkinter doesn't support .png format and it supports only gif,ppm/pgm format.
If you want to use .png format then you need to use PIL library.
Then I think that your image is getting totally wasted after your window1 and window2 instances are closed.
Thus, you need to add self before img.
Also, you are calling Tk() two times which is a problem.
Lastly, you are using similar names in both classes which is not good.
Thus after all editing your code will look like.

from PIL import ImageTk
PANEL_HEIGHT = 440
PANEL_WIDTH = 304
BKG_IMG = "./backgrounds/Wireframe- welcome screen – 1.png"
MANAGE_ACC_BKG_IMG = "./backgrounds/Wireframe- welcome screen – 1.png"

panel = Tk()
panel.geometry(f"{PANEL_WIDTH}x{PANEL_HEIGHT}")

class window1:

    def __init__(self):
        self.canvas = Canvas(panel,width=2*PANEL_WIDTH, height=2*PANEL_HEIGHT)
        canvas = self.canvas

        self.img = ImageTk.PhotoImage(file=BKG_IMG)
        canvas.create_image(PANEL_WIDTH,PANEL_HEIGHT,image=self.img)
        canvas.place(x=-(PANEL_WIDTH/2),y=-(PANEL_HEIGHT/2))

class window2:

    def __init__(self):
        self.canvas1 = Canvas(panel, width=2 * PANEL_WIDTH, height=2 * PANEL_HEIGHT)
        canvas1 = self.canvas1
        self.img1 = ImageTk.PhotoImage(file=MANAGE_ACC_BKG_IMG)
        canvas1.create_image(PANEL_WIDTH, PANEL_HEIGHT, image=self.img1)
        canvas1.place(x=-(PANEL_WIDTH / 2), y=-(PANEL_HEIGHT / 2))

window1()
window2()
panel.mainloop

let me know if it works.

although i solved my problem, but I always use png format and it works with PhotoImage — gyan mishra, Apr 24 '21 at 13:27
I think the above link has died I didn't know about `create_image` method of `canvas` so I searched for it on Google and found this and gave the anwer on its basis but I tested the code myself also on pycharm . Also I would like to know how you solved your problem — Michael Stevens, Apr 24 '21 at 13:36
by using Toplevel() and frame instead of calling Tk() again and again — gyan mishra, Apr 25 '21 at 03:14

How to get two images on separate frames using Canvas in tkinter?

3 Answers3