画像がボタンに表示されない

Question

Pythonを始めたばかりの初心者です。自分で作った画像をボタンにはめ込みたいのですが、ボタン枠のみしか表示されず、画像が表示されません。アドバイス、よろしくお願いいたします。

    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)
        self.controller = controller
        self.configure(bg="#014cc4")

        button_Sw = tk.Button(self,bg="white",width=40, height=40)
        button_Sw.pack()
        switch_button_image = tk.PhotoImage(file="./switch.png")
        button_Sw.configure(image=switch_button_image)
        button_Sw.place(x=19, y=10)


        button_Se = tk.Button(self,bg="white", width=40, height=40)
        button_Se.pack()
        setting_button_image = tk.PhotoImage(file="./setting.png")
        button_Se.config(image=setting_button_image)
        button_Se.place(x=250, y=10)
        
コード

Comments

[stdio]

switch_button_image = tk.PhotoImage(file="./switch.png")
のファイル名を間違えている可能性がありますね。
switch_button_image = tk.PhotoImage(file="..\switch.png")

もし違っていたらすみません。ですが一回、switch_button_imageの中身を確認した方が良さそうです。

Answer 1

...
switch_button_image = tk.PhotoImage(file="./switch.png")
button_Sw.configure(image=switch_button_image)
...

tkinterのPhotoImageは「画像を表示しつづけている間、アプリケーションでPhotoImageインスタンスの参照をどこかにキープしておかなければならない」というちょっとわかりにくい仕様があったと思います。今のコードでインスタンスの参照を保持しているのはswitch_button_image変数ですが、この変数は__init__メソッドのローカル変数なのでメソッド完了後はなくなってしまいます。つまりその時点でPhotoImageインスタンスの参照を保持している変数がなくなりtkinterが画像を表示する前提がくずれてしまうのではないかと想像します。

対処として

...
self.switch_button_image = tk.PhotoImage(file="./switch.png")
button_Sw.configure(image=self.switch_button_image)
...

のようにインスタンス変数に格納してはいかがでしょうか？
こうしておけばこのクラス(おそらくFrameの派生クラス)のインスタンスがなくならない限りPhotoImageインスタンスの参照がずっと残るので期待どおりに画像が表示されるのではないかと想像します。

すみませんが、今、自分で確認する時間がないので違ってたらごめんなさい。

---

追記：

実際にやってみましたが元の回答で書いたことは正しそうです。しかしながらご質問のコードは一部しか書かれておらず、書き方によって上記の問題以前にボタン自体が表示されないという不具合がおきそうです。以下のコードで確認してみました。

import tkinter as tk


class MyFrame(tk.Frame):
    # 問題とは無関係な冗長な記述をより短い記述に書き換えてます
    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent, bg='#014cc4')
        self.controller = controller

        switch_button_image = tk.PhotoImage(file="./switch.png")
        button_Sw = tk.Button(self, image=switch_button_image, bg="white", width=40, height=40)
        button_Sw.pack()
        button_Sw.place(x=19, y=10)

        setting_button_image = tk.PhotoImage(file="./setting.png")
        button_Se = tk.Button(self, image=setting_button_image, bg="white", width=40, height=40)
        button_Se.pack()
        button_Se.place(x=250, y=10)


def report(ev):
    w = ev.widget
    print(f'widget:{w}, width={w.winfo_width()}, height={w.winfo_height()}')


root = tk.Tk()
root.bind_all('<Configure>', report)
root.geometry('400x400')
frame = MyFrame(root, object())
frame.pack()
root.mainloop()

上記を実行するとMyFrameの大きさは1x1にしかならず、配置した2つのボタンはMyFrameの領域外に位置付けられてしまいボタン自体が見えなくなることがわかります。こうなる原因はウィジェットのレイアウト方法がおかしいからです。

MyFrameの画面構成を決めているのはMyFrameの__init__メソッドですが、MyFrameのレイアウト方法は次のいずれかの方針とすべきです。(gridも選択肢になりますがその方法については言及しません)

(1) MyFrameの大きさを明示的に指定しておき、その上で各Buttonなどをplaceで配置
(2) 子供をpackで配置してMyFrameの大きさは子供の位置や大きさに応じて自動的に決める

元のコードでは(1),(2)のどちらでもなくpackとplaceを両方使ってます。placeを呼び出すとpackの効果はなくなりますのでpackしてないことと同義になります。
レイアウトのしかたは慣れないと混乱しがちです。例えば
http://www.shido.info/py/tkinter2.html
のような解説をよく読むとよいとおもいます。

---

「なぜうまくいかないか」について説明を試みましたがちょっと難しいかも知れませんので、最後に「うまく表示される簡単なコード例」を示しておきます。

import tkinter as tk


class MyFrame(tk.Frame):
    def __init__(self, parent, controller):
        # Frameのサイズを明示的に指定する
        tk.Frame.__init__(self, parent, width=400, height=400, bg='#014cc4')
        self.controller = controller

        switch_button_image = tk.PhotoImage(file="./switch.png")
        button_Sw = tk.Button(self, image=switch_button_image, bg="white", width=40, height=40)
        button_Sw.place(x=19, y=10)
        self.switch_button_image = switch_button_image  # 画像インスタンスの参照を覚えておく

        setting_button_image = tk.PhotoImage(file="./setting.png")
        button_Se = tk.Button(self, image=setting_button_image, bg="white", width=40, height=40)
        button_Se.place(x=250, y=10)
        self.setting_button_image = setting_button_image  # 画像インスタンスの参照を覚えておく


root = tk.Tk()
frame = MyFrame(root, object())
frame.pack()
root.mainloop()

Comments

[bell-chako]

ご丁寧な解説とコード例の添付、ありがとうございました。こちらのコード例で無事に画像とボタンが表示されました。レイアウトの仕方をもっと勉強します。ありがとうございました。