Tkinter: Image change from blank tile to mark (X/O) is not permanent

Question

I'm making a scalable tic-tac-toe program using Tkinter. When I press an empty square button, the image changes, as it should. When I press a different button, the image from the button first pressed disappears completely, when I'd expect it to stay, and the only button with the X/O image is the latest button pressed. Any help in fixing this? I'm a beginner.

If you have any tips on how to make a scalable win check as well (with scalable I mean the user can input board size, from 2x2 to as large as fits the screen), that would be extremely helpful.

Here are the images I used, if they're useful (link works for 24h, they're just basic 125x125 images for a box, X and O) https://picresize.com/b5deea04656747

from tkinter import *

class XOGame:
    def main_game(self):
        self.__game_window = Tk()
        self.__grid_size = 3 # User inputted in a different part of the code
        self.__game_window.title("Tic Tac Toe (" + str(self.__grid_size) + "x"
                                     + str(self.__grid_size) + ")")

        self.build_board(self.__game_window)

        self.__game_window.mainloop()


    def build_board(self, window):
        self.__size = self.__grid_size ** 2

        self.__empty_square = PhotoImage(master=window,
                                         file="rsz_empty.gif")

        self.__squares = [None] * self.__size

        # Building the buttons and gridding them
        for i in range(self.__size):
            self.__squares[i] = (Button(window, image=self.__empty_square))
        row = 0
        column = 0
        number = 1
        for j in self.__squares:

            j.grid(row=row, column=column)
            j.config(command=lambda index=self.__squares.index(j):
                     self.change_mark(index))
            column += 1
            if number % 3 == 0:
                row += 1
                column = 0
            number += 1

# This is the part where the picture changing happens.
# I have yet to implement the turn system, thus self.__x being the only image being configured.
# This is the part with the issue.
    def change_mark(self, i):
        self.__x = PhotoImage(master=self.__game_window,
                              file="rsz_cross.gif")
        self.__o = PhotoImage(master=self.__game_window,
                              file="rsz_nought.gif")
        self.__squares[i].configure(image=self.__x, state=DISABLED)

    def start(self):
        # Function starts the first window of the game.
        self.main_game()


def main():
    ui = XOGame()
    ui.start()


main()

Answer 1

Question: the image from the button first pressed disappears completely

You overwrite self.__x = PhotoImage(... at every click, which results in garbage collection of the previous image and tkinter looses the image reference.

Create the images only once and reuse it like self.empty_square.

Simplify to the following:

    def build_board(self, window):
        self.empty_square = PhotoImage(master=window, file="empty.gif")
        self.x_square = PhotoImage(master=window, file="cross.gif")

        self.squares = []
        for row in range(3):
            for column in range(3):
                self.squares.append(Button(window, image=self.empty_square))
                self.squares[-1].grid(row=row, column=column)
                self.squares[-1].bind("<Button-1>", self.change_mark)

    def change_mark(self, event):
        w = event.widget
        w.configure(image=self.x_square, state=DISABLED)