Add an image on a 'price button' tkinter

Question

A very simple question again. Once again, I have done my research on all websites but only one article kind of helps me.

Here is the article: How do I create a button in Python Tkinter to increase integer variable by 1 and display that variable?

And this is the code I am interested in (from the article above):

import tkinter
import sys

root = tkinter.Tk()
root.geometry("200x200")
root.title("His Button Increaser")

counter = tkinter.IntVar()

def onClick(event=None):
    counter.set(counter.get() + 1)

tkinter.Label(root, textvariable=counter).pack()
tkinter.Button(root, text="Increase", command=onClick, fg="dark green", bg = 
"white").pack()

root.mainloop()

Basically, I want to add an image to the button and remove the text on that button, so the user sees a picture, and when they click on the button, it displays the price at the top.

The part of my code I want to implement is: PhotoImage(file = "imageofcar".png")

Thanks :)

score 1 · Accepted Answer · answered Aug 13 '18 at 11:43

1

To display an image on the button, you just have to pass the associated PhotoImage object to the Button through the parameter named image. Here is the solution:

import tkinter

root = tkinter.Tk()
root.geometry("200x200")
root.title("His Button Increaser")

counter = tkinter.IntVar()

def onClick(event=None):
    counter.set(counter.get() + 1)


tkinter.Label(root, textvariable=counter).pack()

photo = tkinter.PhotoImage(file='imageofcar.png')
tkinter.Button(root, image=photo, command=onClick, fg="dark green", bg = "white").pack()


root.mainloop()

answered Aug 13 '18 at 11:43

Laurent H.

6,316
1
18
40

That works perfectly fine thanks. I can now implement this into my code, as the code above was from another article. Thank you – theoneandonly Aug 13 '18 at 11:47
You're welcome. Please consider accepting this answer (by clicking on Accept) if you find it the most appropriate for you. – Laurent H. Aug 13 '18 at 11:50
Just another additional thing I want to add, is how do open a new window with the code above. I have tried to create a function and have tried the code - 'command=createwindow' - EDIT: never mind, i've figured it out :p – theoneandonly Aug 14 '18 at 11:26

score 0 · Answer 2 · answered Aug 13 '18 at 11:42

You can do this as following: First you create a PhotoImage object in which you pass the image you want to load as parameter, then you configure your button to accept this image at the specified size and finally you pack the button with pack():

from tkinter import *
import sys

root = Tk()
root.geometry("200x200")
root.title("His Button Increaser")

counter = IntVar()

def onClick(event=None):
    counter.set(counter.get() + 1)

label = Label(root, textvariable=counter).pack()
button = Button(root, text="Increase", command=onClick, fg="dark green", bg = "white")
photo = PhotoImage(file = "imageofcar.png")
button.config(image=photo,width="100",height="100")
button.pack()

root.mainloop()

score 0 · Answer 3 · answered Aug 13 '18 at 11:43

You can add an image to a button like this:


image = Image.open("imageofcar.jpg")
photo = ImageTk.PhotoImage(image)
b.config(image=photo)

where b is a reference to the button object. It's usually a bad idea to create a Tk object and "pack" it in one line, because the pack function returns None. These changes added to your code results in this:


import tkinter
import sys
from PIL import Image, ImageTk

root = tkinter.Tk()
root.geometry("200x200")
root.title("His Button Increaser")

counter = tkinter.IntVar()

def onClick(event=None):
    counter.set(counter.get() + 1)

tkinter.Label(root, textvariable=counter).pack()
b = tkinter.Button(root, text="Increase", command=onClick, fg="dark green", bg = 
"white")
b.pack()

image = Image.open("imageofcar.jpg")
photo = ImageTk.PhotoImage(image)
b.config(image=photo)

root.mainloop()

Add an image on a 'price button' tkinter

3 Answers3