title: Tkinter how to place image into a frame
body: <p>I have seen other posts about this topic but they are not very conclusive, they only provide a suggestion to use other modules to do this.</p>
  
  <p>I am trying to insert my <code>maincharacter.png</code>(<a href="http://pluspng.com/img-png/png-character--600.png" rel="nofollow noreferrer">http://pluspng.com/img-png/png-character--600.png</a>) image into my <code>top_left</code> frame. </p>
  
  <p>Code (run it):</p>
  
  <pre><code>from tkinter import *
  from PIL import ImageTk, Image
  
  class GameScreen:
      def __init__(self, master):
  
          # create all of the main containers
          top_left = Frame(master, bg='black', width=200, height=200)
          top_middle = Frame(master, bg='green', width=200, height=200)
          top_right = Frame(master, bg="green", width=200, height=200)
          middle_left = Frame(master, bg='green', width=200, height=200)
          middle = Frame(master, bg='green', width=200, height=200)
          middle_right = Frame(master, bg='green', width=200, height=200)
          bottom_left = Frame(master, bg='green',width=200, height=200 )
          bottom_middle = Frame(master, bg='green', width=200, height=200 )
          bottom_right = Frame(master, bg='green', width=200, height=200)
  
          # layout all of the main containers
          top_left.grid(row=0)
          top_middle.grid(row=0, column = 1)
          top_right.grid(row=0, column=2)
          middle_left.grid(row=1)
          middle.grid(row=1, column=1)
          middle_right.grid(row=1, column=2)
          bottom_left.grid(row=2)
          bottom_middle.grid(row=2, column=1)
          bottom_right.grid(row=2, column=2)
  
          c1 = ImageTk.PhotoImage(Image.open('maincharacter.png'))
          c1_label = Label(top_left, image=c1)
          c1_label.pack()
  
  
  root = Tk()
  root.title("RPG Game")
  root.geometry("600x600")
  display = GameScreen(root)
  
  
  
  root.mainloop()
  </code></pre>
  
  <p>When I tried to do this, there were mainly two problems:</p>
  
  <ul>
  <li>All my frames moved out of place</li>
  <li>My character might be too big</li>
  </ul>
  
  <p>Edit - why are there white lines now:</p>
  
  <p><a href="https://i.stack.imgur.com/1QRoL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1QRoL.png" alt="GUI"></a></p>