vajra11
Posts: 98
Joined: Thu Jul 05, 2018 4:44 am

How to display an image using tkinter in gui

Thu Jan 10, 2019 6:56 am

this is code to display image on screen with tkinter

Code: Select all

from tkinter import *

# pip install pillow
from PIL import Image, ImageTk

class Window(Frame):
    def __init__(self, master=None):
        Frame.__init__(self, master)
        self.master = master
        self.pack(fill=BOTH, expand=1)
        
        load = Image.open("parrot.jpg")
        render = ImageTk.PhotoImage(load)
        img = Label(self, image=render)
        img.image = render
        img.place(x=0, y=0)

        
root = Tk()
app = Window(root)
root.wm_title("Tkinter window")
root.geometry("200x120")
root.mainloop()
It's working with no issues

I am trying to modified code to display image in different row and cloumn

This is mine code to display image but I don't get image on screen

Code: Select all

import tkinter as tk

from PIL import Image, ImageTk

class MainApplication(tk.Frame):
   def __init__(self, master):
       self.master = master
       tk.Frame.__init__(self, self.master)
        
   def create_widgets(self):
       self.create_image()
       
   def create_image():
       load = Image.open("parrot.jpg")
       render = ImageTk.PhotoImage(load)
       img = Label(self, image=render)
       img.image = render
       img.place(x=0, y=0)

if __name__ == '__main__':
   root = tk.Tk()
   main_app =  MainApplication(root)
   root.mainloop()
        
What's the wrong in code ?

scotty101
Posts: 3711
Joined: Fri Jun 08, 2012 6:03 pm

Re: How to display an image using tkinter in gui

Thu Jan 10, 2019 10:08 am

You aren't calling the create_widgets method so the code call create_image doesn't get called therefore the code to display the image doesn't get called.

If you put print statements in your code or run it though to tool with a debugger you will be able to debug these kind of things yourself.
Electronic and Computer Engineer
Pi Interests: Home Automation, IOT, Python and Tkinter

vajra11
Posts: 98
Joined: Thu Jul 05, 2018 4:44 am

Re: How to display an image using tkinter in gui

Thu Jan 10, 2019 11:32 am

scotty101 wrote:
Thu Jan 10, 2019 10:08 am
You aren't calling the create_widgets method so the code call create_image doesn't get called therefore the code to display the image doesn't get called.

If you put print statements in your code or run it though to tool with a debugger you will be able to debug these kind of things yourself.
I added print statement in function. and I am calling create_image(self)

Code: Select all

import tkinter as tk

from PIL import Image, ImageTk

class MainApplication(tk.Frame):
   def __init__(self, master):
       self.master = master
       tk.Frame.__init__(self, self.master)
        
   def create_widgets(self):
       self.create_image()
       
   def create_image(self):
       print ("image")
       load = Image.open("parrot.jpg")
       render = ImageTk.PhotoImage(load)
       img = Label(self, image=render)
       img.image = render
       img.place(x=0, y=0)
  
if __name__ == '__main__':
   root = tk.Tk()
   main_app =  MainApplication(root)
   root.mainloop()

User avatar
Paeryn
Posts: 2657
Joined: Wed Nov 23, 2011 1:10 am
Location: Sheffield, England

Re: How to display an image using tkinter in gui

Thu Jan 10, 2019 11:44 am

You are calling create_image() from within create_widgets() but nowhere are you calling create_widgets() so neither will be run.
She who travels light — forgot something.

vajra11
Posts: 98
Joined: Thu Jul 05, 2018 4:44 am

Re: How to display an image using tkinter in gui

Thu Jan 10, 2019 11:58 am

Paeryn wrote:
Thu Jan 10, 2019 11:44 am
You are calling create_image() from within create_widgets() but nowhere are you calling create_widgets() so neither will be run.
I understand it
What you said, I am doing here

Code: Select all

import tkinter as tk

def function(Frame):
    label = tk.Label(Frame, text="Hello")
    label.pack(padx=20, pady=20)
    return

if __name__ == "__main__":
    root = tk.Tk()
    function(root)
    root.mainloop()

scotty101
Posts: 3711
Joined: Fri Jun 08, 2012 6:03 pm

Re: How to display an image using tkinter in gui

Thu Jan 10, 2019 12:29 pm

vajra11 wrote:
Thu Jan 10, 2019 11:58 am
I understand it
What you said, I am doing here
If you were calling it, it would be working...

Post your latest code attempt.
Electronic and Computer Engineer
Pi Interests: Home Automation, IOT, Python and Tkinter

vajra11
Posts: 98
Joined: Thu Jul 05, 2018 4:44 am

Re: How to display an image using tkinter in gui

Thu Jan 10, 2019 12:43 pm

scotty101 wrote:
Thu Jan 10, 2019 12:29 pm
vajra11 wrote:
Thu Jan 10, 2019 11:58 am
I understand it
What you said, I am doing here
If you were calling it, it would be working...

Post your latest code attempt.
please see my code in previous post. I don't know where I am making mistake

scotty101
Posts: 3711
Joined: Fri Jun 08, 2012 6:03 pm

Re: How to display an image using tkinter in gui

Thu Jan 10, 2019 1:20 pm

vajra11 wrote:
Thu Jan 10, 2019 12:43 pm
please see my code in previous post. I don't know where I am making mistake
If you mean this code. Then it is wrong

Code: Select all

import tkinter as tk

from PIL import Image, ImageTk

class MainApplication(tk.Frame):
   def __init__(self, master):
       self.master = master
       tk.Frame.__init__(self, self.master)
        
   def create_widgets(self):
       self.create_image()
       
   def create_image(self):
       print ("image")
       load = Image.open("parrot.jpg")
       render = ImageTk.PhotoImage(load)
       img = Label(self, image=render)
       img.image = render
       img.place(x=0, y=0)
  
if __name__ == '__main__':
   root = tk.Tk()
   main_app =  MainApplication(root)
   root.mainloop()
Try this instead

Code: Select all

import tkinter as tk

from PIL import Image, ImageTk

class MainApplication(tk.Frame):
   def __init__(self, master):
       self.master = master
       tk.Frame.__init__(self, self.master)
       #NEW LINE BELOW!!! - Call to create_widgets
       self.create_widgets()
        
   def create_widgets(self):
       self.create_image()
       
   def create_image(self):
       print ("image")
       load = Image.open("parrot.jpg")
       render = ImageTk.PhotoImage(load)
       img = Label(self, image=render)
       img.image = render
       img.place(x=0, y=0)
  
if __name__ == '__main__':
   root = tk.Tk()
   main_app =  MainApplication(root)
   root.mainloop()
Electronic and Computer Engineer
Pi Interests: Home Automation, IOT, Python and Tkinter

vajra11
Posts: 98
Joined: Thu Jul 05, 2018 4:44 am

Re: How to display an image using tkinter in gui

Sat Jan 12, 2019 5:00 am

scotty101 wrote:
Thu Jan 10, 2019 1:20 pm
vajra11 wrote:
Thu Jan 10, 2019 12:43 pm
please see my code in previous post. I don't know where I am making mistake
Try this instead

Code: Select all

import tkinter as tk

from PIL import Image, ImageTk

class MainApplication(tk.Frame):
   def __init__(self, master):
       self.master = master
       tk.Frame.__init__(self, self.master)
       #NEW LINE BELOW!!! - Call to create_widgets
       self.create_widgets()
        
   def create_widgets(self):
       self.create_image()
       
   def create_image(self):
       print ("image")
       load = Image.open("parrot.jpg")
       render = ImageTk.PhotoImage(load)
       img = Label(self, image=render)
       img.image = render
       img.place(x=0, y=0)
  
if __name__ == '__main__':
   root = tk.Tk()
   main_app =  MainApplication(root)
   root.mainloop()
I tried this
img = Label(self, image=render)
NameError: name 'Label' is not defined

I have modified it

Code: Select all

import tkinter as tk

from PIL import Image, ImageTk

class MainApplication(tk.Frame):
   def __init__(self, master):
       self.master = master
       tk.Frame.__init__(self, self.master)
       #NEW LINE BELOW!!! - Call to create_widgets
       self.create_widgets()
        
   def create_widgets(self):
       self.create_image()
       
   def create_image(self):
       print ("image")
       load = Image.open("image.jpg")
       render = ImageTk.PhotoImage(load)
       img = tk.Label(self, image=render)
       img.image = render
       img.place(x=0, y=0)
  
if __name__ == '__main__':
   root = tk.Tk()
   main_app =  MainApplication(root)
   root.mainloop()
It print image but doesn't show any image ?

scotty101
Posts: 3711
Joined: Fri Jun 08, 2012 6:03 pm

Re: How to display an image using tkinter in gui

Sat Jan 12, 2019 5:13 pm

Ah! One of those tkinter gotchas! You need to make the images class properties otherwise they are destroyed when the function is finished. Adding self. in front of them does the job. See below

Code: Select all

import tkinter as tk

from PIL import Image, ImageTk

class MainApplication(tk.Frame):
   def __init__(self, master):
       self.master = master
       tk.Frame.__init__(self, self.master)
       self.create_widgets()
        
   def create_widgets(self):
       self.create_image()
       
   def create_image(self):
       self.image = Image.open("image.jpg")
       self.photo = ImageTk.PhotoImage(self.image)
       self.img = tk.Label(self,text="Hello",image=self.photo)
       self.img.grid()

  if __name__ == '__main__':
   root = tk.Tk()
   main_app =  MainApplication(root)
   main_app.grid()
   root.mainloop()
Electronic and Computer Engineer
Pi Interests: Home Automation, IOT, Python and Tkinter

vajra11
Posts: 98
Joined: Thu Jul 05, 2018 4:44 am

Re: How to display an image using tkinter in gui

Sun Jan 13, 2019 9:10 am

scotty101 wrote:
Sat Jan 12, 2019 5:13 pm
Ah! One of those tkinter gotchas! You need to make the images class properties otherwise they are destroyed when the function is finished. Adding self. in front of them does the job. See below
Than you scotty

How to set image in frame

label should be in right side and logo (image)should be left side in the frame

Code: Select all

import tkinter as tk

from PIL import Image, ImageTk

class MainApplication(tk.Frame):
   def __init__(self, master):
       self.master = master
       tk.Frame.__init__(self, self.master)
       self.configure_gui()
       self.create_widgets()

   def configure_gui(self):
       self.master.title('Layout')
       self.master.geometry('1000x1000')
       self.master.resizable(0, 0)

   def create_widgets(self):
       self.create_frames()
       self.create_image()
       self.create_labels()
       
   def create_image(self):
       self.image = Image.open("image.jpg")
       self.photo = ImageTk.PhotoImage(self.image)
       self.img = tk.Label(self,text="image",image=self.photo)
       self.img.grid(padx=350, pady=0)
       
   def create_frames(self):
       self.Frame11 = tk.Frame(width=500, height=50)
       self.Frame11.grid_propagate(0)
       self.Frame11.grid(row=0, column=0)
        
       self.Frame12 = tk.Frame(width=510, height=150)
       self.Frame12.grid_propagate(0)
       self.Frame12.grid(row=1, column=0, pady = 100)
       
       
   def create_labels(self):
      L1 = tk.Label(self.Frame11, text=" Hospital")
      L1.place(x=180, y=30)

if __name__ == '__main__':
   root = tk.Tk()
   main_app =  MainApplication(root)
   main_app.grid()
   root.mainloop()

scotty101
Posts: 3711
Joined: Fri Jun 08, 2012 6:03 pm

Re: How to display an image using tkinter in gui

Mon Jan 14, 2019 1:11 pm

Read the tkinter documation or the ever useful effbot tkinterbook.

http://effbot.org/tkinterbook/label.htm

I suspect you want to set the "compound" option to either LEFT or RIGHT.
Electronic and Computer Engineer
Pi Interests: Home Automation, IOT, Python and Tkinter

vajra11
Posts: 98
Joined: Thu Jul 05, 2018 4:44 am

Re: How to display an image using tkinter in gui

Tue Jan 15, 2019 7:27 am

scotty101 wrote:
Mon Jan 14, 2019 1:11 pm
Read the tkinter documation or the ever useful effbot tkinterbook.

http://effbot.org/tkinterbook/label.htm

I suspect you want to set the "compound" option to either LEFT or RIGHT.
my label is it in Frame1 but image is not in the Frame1

Code: Select all

import tkinter as tk

from PIL import Image, ImageTk

class MainApplication(tk.Frame):
   def __init__(self, master):
       self.master = master
       tk.Frame.__init__(self, self.master)
       self.configure_gui()
       self.create_widgets()

   def configure_gui(self):
       self.master.title('image')
       self.master.geometry('600x500')
       self.master.resizable(0, 0)

   def create_widgets(self):
       self.create_frames()
       self.create_image()
       self.create_labels()
       
   def create_image(self):
       self.image = Image.open("image3.jpg")
       self.photo = ImageTk.PhotoImage(self.image)
       self.img = tk.Label(self,text="image",image=self.photo)
       self.img.grid(padx=350, pady=0)
       
   def create_frames(self):
       self.Frame1 = tk.Frame(width=500, height=50)
       self.Frame1.grid_propagate(0)
       self.Frame1.grid(row=0, column=0)
       
       
   def create_labels(self):
      L1 = tk.Label(self.Frame1, text=" Hospital")
      L1.place(x=0, y=20)

if __name__ == '__main__':
   root = tk.Tk()
   main_app =  MainApplication(root)
   main_app.grid()
   root.mainloop()
I think, I have to change this function

Code: Select all

   def create_image(self):
       self.image = Image.open("image3.jpg")
       self.photo = ImageTk.PhotoImage(self.image)
       self.img = tk.Label(self,text="image",image=self.photo)
       self.img.grid(padx=350, pady=0)
How to set image in one frame [Frame1]

scotty101
Posts: 3711
Joined: Fri Jun 08, 2012 6:03 pm

Re: How to display an image using tkinter in gui

Tue Jan 15, 2019 10:24 am

It's pretty simple.

Try taking some time to understand the code that you have already written rather than just copy and pasting.

This line, tells tk that the label containing the image's parent widget is "self", the "MainApplication" Frame

Code: Select all

self.img = tk.Label(self,text="image",image=self.photo)
Were you to change the code to

Code: Select all

self.img = tk.Label(self.Frame1,text="image",image=self.photo)
what do you think that would change the label's parent widget to?
Electronic and Computer Engineer
Pi Interests: Home Automation, IOT, Python and Tkinter

Return to “Python”