在python tkinter中与滚动视图相关的顶级窗口中未显示图像

Question

I have been trying to make a top-level window view which collects and shows all the images present in a folder in columns of 10. If the images were more than the allocated size of the window I wanted it to be possible to scroll through the images. I followed the answer given to Scrollable Toplevel Window (tkinter) to correctly add an image to a canvas and make it possible to scroll through them. But, in my case the entire popup window just comes out to be blank. Here is the code

import tkinter as tk
from tkinter import *
import glob
import os
from PIL import Image, ImageTk

def pop_up_window():
   win = Toplevel()

   vbar = tk.Scrollbar(win, orient = VERTICAL)
   vbar.grid(row = 0, column = 1, sticky = "ns")

   container = tk.Canvas(win, height=300, width=720, scrollregion=(0, 0, 300, 720))
   container.grid(row = 0, column = 0, sticky = "nsew")

   vbar.config(command=container.yview)
   container.config(yscrollcommand=vbar.set)

   path = "D:\\image_collection"
   COLUMNS = 10
   image_count = 0

   for infile in glob.glob(os.path.join(path, '*.jpg')):
      image_count += 1
      r, c = divmod(image_count-1, COLUMNS)
      im = Image.open(infile)
      resized = im.resize((100, 100), Image.ANTIALIAS)
      img_part = ImageTk.PhotoImage(Image.open(infile).resize((100, 100), Image.ANTIALIAS))
      image_in_canvas = container.create_image(r, c, image = img_part)

   win.rowconfigure(0, weight=1)
   win.columnconfigure(0, weight=1)

root = Tk()
button = Button(root, text='Call Pop-up window', command = pop_up_window)
button.place(x = 0, y = 0)
root.mainloop()

What changes should I make?

Answer 1

You need to keep a reference to your images or it will be garbage collected by Python. A simple change can do it:

placeholder = []

def pop_up_window():
    ...

    for infile in glob.glob(os.path.join(path, '*.jpg')):
       image_count += 1
       r, c = divmod(image_count-1, COLUMNS)
       im = Image.open(infile)
       img_part = ImageTk.PhotoImage(Image.open(infile).resize((100, 100), Image.ANTIALIAS))
       placeholder.append(img_part)
       image_in_canvas = container.create_image(r, c, image = img_part)

Also I want to point that the create_image method takes two coordinates as args. You are currently creating them as if they are grids, and it won't show up in the alignment you expected.

Answer 2

Your code works but it have few issues with it. I fixed all of them or maybe most of them, in case I forgot to notice it.

• When creating an image in a function always create a reference to them as here you have many images so you can create a list to your container .

• To keep updating the scrollregion depending upon the amount of images bind "" to the container with the callback function lambda e: scrollregion=container.bbox('all') .

Here are the changes that I did to your pop_up_window function.

...

path = "D:\\image_collection"
COLUMNS = 7
container.img_list = []
column = 0
row = 0

for infile in glob.glob(os.path.join(path, '*.jpg')):
    if column >= COLUMNS: 
        column = 0
        row += 1
    im = Image.open(infile).resize((100, 100), Image.ANTIALIAS)
    img = ImageTk.PhotoImage(im)
    container.img_list.append(img)
    container.create_image(column*100+10, row*100+10, image = img, anchor='nw')
    column += 1

container.bind('<Configure>',lambda e:container.configure(scrollregion=container.bbox('all')))

...