Home > Back-end >  How to add Image on the button without text in tkinter?
How to add Image on the button without text in tkinter?

Time:10-02

Recently I made a calculator in tkinter, in it i created a menu like thing on the left corner of the calculator. Inside the menu i created 2 buttons named as "Light Mode" and "Dark Mode". I wanted to add an image on the button " Dark Mode " instead of the text "Dark Mode". But when I replace the text with image, the button doesn't show the image on the button instead it shows something called "pyimage3"

this is what the image was created and assigned like:

self.darkmode_img= PhotoImage(file="c:/Users/sheran/Downloads/Dark_Mode.png")

i want this darkmode_img to be on the button instead of the text.

here is the full code:

       f1=Frame(self.window,width=170,height=100,bg='#fff',borderwidth=0,bd=0)
       f1.place(x=0,y=0)

       # Buttons
       def bttn(x,y,text,cmd):
          def on_entera(event):
            myButton1['background'] = '#F0F0F0' #ffcc66
            myButton1['foreground']= '#262626'  #000d33

          def on_leavea(event):
            myButton1['background'] = "#fff"
            myButton1['foreground']= '#000'

          myButton1 = Button(f1,text=self.darkmode_img,
                       width=42,
                       height=2,
                       fg='#000',
                       border=0,
                       bg="#fff",
                       borderwidth=0,
                       activeforeground='#262626',
                       activebackground="#F0F0F0",            
                       command=cmd)
                      
          myButton1.bind("<Enter>", on_entera)
          myButton1.bind("<Leave>", on_leavea)

          myButton1.place(x=-65,y=32)
         
       bttn(x=0,y=4,text=self.darkmode_img,cmd=self.darkmode_on)

       def bttn2(x,y,text,cmd):
          def on_entera(event):
            myButton1['background'] = '#F0F0F0' #ffcc66
            myButton1['foreground']= '#262626'  #000d33

          def on_leavea(event):
            myButton1['background'] = "#fff"
            myButton1['foreground']= '#000'

          myButton1 = Button(f1,text=text,
                       width=42,
                       height=2,
                       fg='#000',
                       border=0,
                       bg="#fff",
                       activeforeground='#262626',
                       activebackground="#F0F0F0",            
                       command=cmd)
                      
          myButton1.bind("<Enter>", on_entera)
          myButton1.bind("<Leave>", on_leavea)

          myButton1.place(x=-63,y=64)
       bttn2(x=0,y=4,text="Light Mode",cmd=self.lightmode_on)


       #
       def dele():
          f1.destroy()
        
       global img2
       img2 = ImageTk.PhotoImage(Image.open("c:/Users/sheran/Downloads/toggle_win/close1111.png"))

       MB=Button(f1,
           image=img2,
           border=0,
           command=dele,
           bg='#fff',
           activebackground='#fff').place(x=5,y=1)
    def img1(self):
     img1 = ImageTk.PhotoImage(Image.open("c:/Users/sheran/Downloads/toggle_win/open1111.png"))
    
    def Button(self):
    
     Button(self.window,image=self.img1,
       command=self.toggle_win,
       bd=0,
       borderwidth=0,
       bg='#f0f0f0',
       activebackground='#fff').place(x=5,y=1)

here is what I'm getting as the result:

in that result above, the place where it has "pyimage3", I need to place the image (self.darkmode_img) there on that button.

please help me!!! I'm definetely a newbie :)

CodePudding user response:

The reason the button says "pyimage3" is because that's what you get when you convert an instance of PhotoImage to a string. The image is being converted to a string because you're passing the image to the text parameter. The text parameter requires a string.

To add an image to a Button, set the image attribute:

Button(f1,image=self.darkmode_img, ...)

CodePudding user response:

To add images to buttons you need to write the following code (it is an example):

from tkinter import *

root = Tk()

img = PhotoImage(file='image.png')
mybtn = Button(root, image=img, bd=0, cursor='hand2)
mybtn.image = img
mybtn.pack()

root.mainloop()

Most of the times the mistake happens when you don't put the 3rd line or in the 1st line don't put the file option.

  • Related