Why is this tkinter function not displaying any pictures-CodePudding

I have code to display 2x5 images and change them when I click on them. However, the code I wrote does not display any images in the tkinter windows. Why?

Some details:

the URLs are working fine

import tkinter as tk
from PIL import Image, ImageTk

# Create the main window
root = tk.Tk()

# Create a list of images to display
images = ['https://lh3.googleusercontent.com/SsEIJWka3_cYRXXSE8VD3XNOgtOxoZhqW1uB6UFj78eg8gq3G4jAqL4Z_5KwA12aD7Leqp27F653aBkYkRBkEQyeKxfaZPyDx0O8CzWg=s0',
 'https://lh3.googleusercontent.com/Bawo7r1nPZV6sJ4OHZJHdKV_4Ky59vquAR7KoUXcNZgx9fqTaOW-QaOM9qoyYhOTAopzjt9OIfW06RMwa-9eJW9KjQw=s0',
 'https://lh3.googleusercontent.com/tm1DbZrAP0uBM-OJhLwvKir1Le5LglRF_bvbaNi6m-F_pIyttsWQz040soRY9pWA9PgNEYFA_fBkg_keYixRXCAjz9Q=s0',
 'https://lh3.googleusercontent.com/AyiKhdEWJ7XmtPXQbRg_kWqKn6mCV07bsuUB01hJHjVVP-ZQFmzjTWt7JIWiQFZbb9l5tKFhVOspmco4lMwqwWImfgg=s0',
 'https://lh3.googleusercontent.com/FNNTrTASiUR0f49UVUY5bisIM-3RlAbf_AmktgnU_4ou1ZG0juh3pMT1-xpQmtN1R8At4Gq9B4ioSSi4TVrgbCZsmtY=s0',
 'https://lh3.googleusercontent.com/mAyAjvYjIeAIlByhJx1Huctgeb58y7519XYP38oL1FXarhVlcXW7kxuwayOCFdnwtOp6B6F0HJmmws-Ceo5b_pNSSQs=s0',
 'https://lh3.googleusercontent.com/gShVRyvLLbwVB8jeIPghCXgr96wxTHaM4zqfmxIWRsUpMhMn38PwuUU13o1mXQzLMt5HFqX761u8Tgo4L_JG1XLATvw=s0',
 'https://lh3.googleusercontent.com/KA2hIo0BlMDmyQDEC3ixvp9WHgcyJnlAvWtVcZmExh9ocPoZdQGRJh7bZjE2Mx2OGC0Zi3QGHGP0LlmuFgRlIYs36Sgn5G2OD-0MaTo=s0',
 'https://lh3.googleusercontent.com/N2m90mImdcoLacUybb_rxcktTwtr0LFhtuzxbSE9elIhElF6jpWngx96_uZ0L1TGNof5pNt4n_Ygb4KYlPTpA9o6788=s0',
 'https://lh3.googleusercontent.com/1pTfYJlLwVTifKj4PlsWPyAg4PcIVBAiVvB8sameSnmm7HRd056abNUIRq33rgry7u9t-ju-eHOnbfqQpK4q_8IwzIXZ4WgrqZW9l7U=s0',
 'https://lh3.googleusercontent.com/0bgOiMrBM2GuhW_pNeQW711GuB3kD7Gq7AILGHaJGeWKa1Fu1hUJGpOjvSpiP_XpgRlC4jVmH0Z1233PEPMJTfNRR7Q=s0',
 'https://lh3.googleusercontent.com/x9NFmu-RbZ_9M5BK_hOzQRdVj4pu7p--y_IYwDK46lDPzQtTIO9AlBV_ObgQiY7GeWE0ZfNjMSyrCWgnwL4MCasQZQ=s0']

# Create a variable to keep track of the current image
current_image = [0,0,0,0,0,0,0,0,0,0]

# Create a grid of labels to display the images
image_grid = [[tk.Label(root) for _ in range(5)] for _ in range(2)]

# Function to change the image
def change_image(x,y):
    global current_image
    current_image[x*5 y]  = 1
    if current_image[x*5 y] >= len(images):
        current_image[x*5 y] = 0
    image = Image.open(BytesIO(requests.get(images[current_image[x*5 y]]).content))
    image = image.resize((256,256))
    print(image)
    photo = ImageTk.PhotoImage(image)
    image_grid[x][y].config(image=photo)
    image_grid[x][y].image = photo

# Bind labels to the function
for i in range(2):
    for j in range(5):
        image_grid[i][j].bind("<Button-1>", lambda event, x=i, y=j: change_image(x,y))
        image_grid[i][j].grid(row=i, column=j)

# Start the main loop
root.mainloop()

CodePudding user response：

The Images will only display after you click on a label. And your labels are all very small when you initialize your window. Set a bigger window and use sticky in grid to get bigger cells (you can even set a border to the labels to see where exactly you're clicking):

import tkinter as tk
from PIL import Image, ImageTk
from io import BytesIO
import requests

# Create the main window
root = tk.Tk()
root.geometry('1280x720')

# Create a list of images to display
images = ['https://lh3.googleusercontent.com/SsEIJWka3_cYRXXSE8VD3XNOgtOxoZhqW1uB6UFj78eg8gq3G4jAqL4Z_5KwA12aD7Leqp27F653aBkYkRBkEQyeKxfaZPyDx0O8CzWg=s0',
 'https://lh3.googleusercontent.com/Bawo7r1nPZV6sJ4OHZJHdKV_4Ky59vquAR7KoUXcNZgx9fqTaOW-QaOM9qoyYhOTAopzjt9OIfW06RMwa-9eJW9KjQw=s0',
 'https://lh3.googleusercontent.com/tm1DbZrAP0uBM-OJhLwvKir1Le5LglRF_bvbaNi6m-F_pIyttsWQz040soRY9pWA9PgNEYFA_fBkg_keYixRXCAjz9Q=s0',
 'https://lh3.googleusercontent.com/AyiKhdEWJ7XmtPXQbRg_kWqKn6mCV07bsuUB01hJHjVVP-ZQFmzjTWt7JIWiQFZbb9l5tKFhVOspmco4lMwqwWImfgg=s0',
 'https://lh3.googleusercontent.com/FNNTrTASiUR0f49UVUY5bisIM-3RlAbf_AmktgnU_4ou1ZG0juh3pMT1-xpQmtN1R8At4Gq9B4ioSSi4TVrgbCZsmtY=s0',
 'https://lh3.googleusercontent.com/mAyAjvYjIeAIlByhJx1Huctgeb58y7519XYP38oL1FXarhVlcXW7kxuwayOCFdnwtOp6B6F0HJmmws-Ceo5b_pNSSQs=s0',
 'https://lh3.googleusercontent.com/gShVRyvLLbwVB8jeIPghCXgr96wxTHaM4zqfmxIWRsUpMhMn38PwuUU13o1mXQzLMt5HFqX761u8Tgo4L_JG1XLATvw=s0',
 'https://lh3.googleusercontent.com/KA2hIo0BlMDmyQDEC3ixvp9WHgcyJnlAvWtVcZmExh9ocPoZdQGRJh7bZjE2Mx2OGC0Zi3QGHGP0LlmuFgRlIYs36Sgn5G2OD-0MaTo=s0',
 'https://lh3.googleusercontent.com/N2m90mImdcoLacUybb_rxcktTwtr0LFhtuzxbSE9elIhElF6jpWngx96_uZ0L1TGNof5pNt4n_Ygb4KYlPTpA9o6788=s0',
 'https://lh3.googleusercontent.com/1pTfYJlLwVTifKj4PlsWPyAg4PcIVBAiVvB8sameSnmm7HRd056abNUIRq33rgry7u9t-ju-eHOnbfqQpK4q_8IwzIXZ4WgrqZW9l7U=s0',
 'https://lh3.googleusercontent.com/0bgOiMrBM2GuhW_pNeQW711GuB3kD7Gq7AILGHaJGeWKa1Fu1hUJGpOjvSpiP_XpgRlC4jVmH0Z1233PEPMJTfNRR7Q=s0',
 'https://lh3.googleusercontent.com/x9NFmu-RbZ_9M5BK_hOzQRdVj4pu7p--y_IYwDK46lDPzQtTIO9AlBV_ObgQiY7GeWE0ZfNjMSyrCWgnwL4MCasQZQ=s0']

# Create a variable to keep track of the current image
current_image = [0,0,0,0,0,0,0,0,0,0]

# Create a grid of labels to display the images
image_grid = [[tk.Label(root, borderwidth=2, relief="groove") for _ in range(5)] for _ in range(2)]

# Function to change the image
def change_image(x,y):
    global current_image
    current_image[x*5 y]  = 1
    if current_image[x*5 y] >= len(images):
        current_image[x*5 y] = 0
    image = Image.open(BytesIO(requests.get(images[current_image[x*5 y]]).content))
    image = image.resize((256,256))
    print(image)
    photo = ImageTk.PhotoImage(image)
    image_grid[x][y].config(image=photo)
    image_grid[x][y].image = photo

# Bind labels to the function
for i in range(2):
    root.rowconfigure(i, weight=1)
    for j in range(5):
        root.columnconfigure(j, weight=1)
        image_grid[i][j].bind("<Button-1>", lambda event, x=i, y=j: change_image(x,y))
        image_grid[i][j].grid(row=i, column=j, sticky="nsew")

# Start the main loop
root.mainloop()

Note: setting rowconfigure/columnconfigure ensures that the cells have the same dimension, you might want to use it in change_image as well

CodePudding user response：

your issue is that the labels start with a zero width and height because they are empty, you could set a placeholder image on startup to make the GUI fit exactly perfect around it.

import tkinter as tk
from PIL import Image, ImageTk
from io import BytesIO
import requests

# Create the main window
root = tk.Tk()

# Create a list of images to display
images = ['https://lh3.googleusercontent.com/SsEIJWka3_cYRXXSE8VD3XNOgtOxoZhqW1uB6UFj78eg8gq3G4jAqL4Z_5KwA12aD7Leqp27F653aBkYkRBkEQyeKxfaZPyDx0O8CzWg=s0',
 'https://lh3.googleusercontent.com/Bawo7r1nPZV6sJ4OHZJHdKV_4Ky59vquAR7KoUXcNZgx9fqTaOW-QaOM9qoyYhOTAopzjt9OIfW06RMwa-9eJW9KjQw=s0',
 'https://lh3.googleusercontent.com/tm1DbZrAP0uBM-OJhLwvKir1Le5LglRF_bvbaNi6m-F_pIyttsWQz040soRY9pWA9PgNEYFA_fBkg_keYixRXCAjz9Q=s0',
 'https://lh3.googleusercontent.com/AyiKhdEWJ7XmtPXQbRg_kWqKn6mCV07bsuUB01hJHjVVP-ZQFmzjTWt7JIWiQFZbb9l5tKFhVOspmco4lMwqwWImfgg=s0',
 'https://lh3.googleusercontent.com/FNNTrTASiUR0f49UVUY5bisIM-3RlAbf_AmktgnU_4ou1ZG0juh3pMT1-xpQmtN1R8At4Gq9B4ioSSi4TVrgbCZsmtY=s0',
 'https://lh3.googleusercontent.com/mAyAjvYjIeAIlByhJx1Huctgeb58y7519XYP38oL1FXarhVlcXW7kxuwayOCFdnwtOp6B6F0HJmmws-Ceo5b_pNSSQs=s0',
 'https://lh3.googleusercontent.com/gShVRyvLLbwVB8jeIPghCXgr96wxTHaM4zqfmxIWRsUpMhMn38PwuUU13o1mXQzLMt5HFqX761u8Tgo4L_JG1XLATvw=s0',
 'https://lh3.googleusercontent.com/KA2hIo0BlMDmyQDEC3ixvp9WHgcyJnlAvWtVcZmExh9ocPoZdQGRJh7bZjE2Mx2OGC0Zi3QGHGP0LlmuFgRlIYs36Sgn5G2OD-0MaTo=s0',
 'https://lh3.googleusercontent.com/N2m90mImdcoLacUybb_rxcktTwtr0LFhtuzxbSE9elIhElF6jpWngx96_uZ0L1TGNof5pNt4n_Ygb4KYlPTpA9o6788=s0',
 'https://lh3.googleusercontent.com/1pTfYJlLwVTifKj4PlsWPyAg4PcIVBAiVvB8sameSnmm7HRd056abNUIRq33rgry7u9t-ju-eHOnbfqQpK4q_8IwzIXZ4WgrqZW9l7U=s0',
 'https://lh3.googleusercontent.com/0bgOiMrBM2GuhW_pNeQW711GuB3kD7Gq7AILGHaJGeWKa1Fu1hUJGpOjvSpiP_XpgRlC4jVmH0Z1233PEPMJTfNRR7Q=s0',
 'https://lh3.googleusercontent.com/x9NFmu-RbZ_9M5BK_hOzQRdVj4pu7p--y_IYwDK46lDPzQtTIO9AlBV_ObgQiY7GeWE0ZfNjMSyrCWgnwL4MCasQZQ=s0']

# Create a variable to keep track of the current image
current_image = [0,0,0,0,0,0,0,0,0,0]

# Create a grid of labels to display the images
image = Image.new('RGBA', (256, 256))
photo = ImageTk.PhotoImage(image)
image_grid = [[tk.Label(root, image=photo, borderwidth=2, relief="groove") for _ in range(5)] for _ in range(2)]

# Function to change the image
def change_image(x,y):
    global current_image
    current_image[x*5 y]  = 1
    if current_image[x*5 y] >= len(images):
        current_image[x*5 y] = 0
    image = Image.open(BytesIO(requests.get(images[current_image[x*5 y]]).content))
    image = image.resize((256,256))
    print(image)
    photo = ImageTk.PhotoImage(image)
    image_grid[x][y].config(image=photo)
    image_grid[x][y].image = photo

# Bind labels to the function
for i in range(2):
    root.rowconfigure(i, weight=1)
    for j in range(5):
        root.columnconfigure(j, weight=1)
        image_grid[i][j].bind("<Button-1>", lambda event, x=i, y=j: change_image(x,y))
        image_grid[i][j].grid(row=i, column=j)

# Start the main loop
root.mainloop()

CodePudding user response：

As already mentioned, you used Label without a text and they were just not visible. I suggest you use Button instead. Your x and y in change_image update correctly, but images[current_image[x*5 y]] always pointed to the same image. I simplified your code and removed the global variable:

import tkinter as tk
from PIL import Image, ImageTk
import requests
from io import BytesIO

# Create the main window
root = tk.Tk()

# Create a list of images to display
images = ['https://lh3.googleusercontent.com/SsEIJWka3_cYRXXSE8VD3XNOgtOxoZhqW1uB6UFj78eg8gq3G4jAqL4Z_5KwA12aD7Leqp27F653aBkYkRBkEQyeKxfaZPyDx0O8CzWg=s0',
 'https://lh3.googleusercontent.com/Bawo7r1nPZV6sJ4OHZJHdKV_4Ky59vquAR7KoUXcNZgx9fqTaOW-QaOM9qoyYhOTAopzjt9OIfW06RMwa-9eJW9KjQw=s0',
 'https://lh3.googleusercontent.com/tm1DbZrAP0uBM-OJhLwvKir1Le5LglRF_bvbaNi6m-F_pIyttsWQz040soRY9pWA9PgNEYFA_fBkg_keYixRXCAjz9Q=s0',
 'https://lh3.googleusercontent.com/AyiKhdEWJ7XmtPXQbRg_kWqKn6mCV07bsuUB01hJHjVVP-ZQFmzjTWt7JIWiQFZbb9l5tKFhVOspmco4lMwqwWImfgg=s0',
 'https://lh3.googleusercontent.com/FNNTrTASiUR0f49UVUY5bisIM-3RlAbf_AmktgnU_4ou1ZG0juh3pMT1-xpQmtN1R8At4Gq9B4ioSSi4TVrgbCZsmtY=s0',
 'https://lh3.googleusercontent.com/mAyAjvYjIeAIlByhJx1Huctgeb58y7519XYP38oL1FXarhVlcXW7kxuwayOCFdnwtOp6B6F0HJmmws-Ceo5b_pNSSQs=s0',
 'https://lh3.googleusercontent.com/gShVRyvLLbwVB8jeIPghCXgr96wxTHaM4zqfmxIWRsUpMhMn38PwuUU13o1mXQzLMt5HFqX761u8Tgo4L_JG1XLATvw=s0',
 'https://lh3.googleusercontent.com/KA2hIo0BlMDmyQDEC3ixvp9WHgcyJnlAvWtVcZmExh9ocPoZdQGRJh7bZjE2Mx2OGC0Zi3QGHGP0LlmuFgRlIYs36Sgn5G2OD-0MaTo=s0',
 'https://lh3.googleusercontent.com/N2m90mImdcoLacUybb_rxcktTwtr0LFhtuzxbSE9elIhElF6jpWngx96_uZ0L1TGNof5pNt4n_Ygb4KYlPTpA9o6788=s0',
 'https://lh3.googleusercontent.com/1pTfYJlLwVTifKj4PlsWPyAg4PcIVBAiVvB8sameSnmm7HRd056abNUIRq33rgry7u9t-ju-eHOnbfqQpK4q_8IwzIXZ4WgrqZW9l7U=s0',
 'https://lh3.googleusercontent.com/0bgOiMrBM2GuhW_pNeQW711GuB3kD7Gq7AILGHaJGeWKa1Fu1hUJGpOjvSpiP_XpgRlC4jVmH0Z1233PEPMJTfNRR7Q=s0',
 'https://lh3.googleusercontent.com/x9NFmu-RbZ_9M5BK_hOzQRdVj4pu7p--y_IYwDK46lDPzQtTIO9AlBV_ObgQiY7GeWE0ZfNjMSyrCWgnwL4MCasQZQ=s0']

# Create a grid of labels to display the images
image_grid = [[tk.Button(root, text=f"Button {x} {y}") for x in range(5)] for y in range(2)]

# Function to change the image
def change_image(x,y):
    print(f"Changing image to: {x} {y} (index: {x*5 y}): {images[x*5 y]}")
    image = Image.open(BytesIO(requests.get(images[x*5 y]).content))
    image = image.resize((256, 256))
    print(image)
    photo = ImageTk.PhotoImage(image)
    image_grid[x][y].config(image=photo)
    image_grid[x][y].image = photo

# Bind labels to the function
for i in range(2):
    for j in range(5):
        image_grid[i][j].bind("<Button-1>", lambda event, x=i, y=j: change_image(x,y))
        image_grid[i][j].grid(row=i, column=j)

# Start the main loop
root.mainloop()