Interfaz. Python.

 TkInter. Etiquetas con imagen

Además de texto (que es lo normal), las etiquetas también pueden contener imágenes.

Vimos en la entrada anterior cómo utilizar etiquetas para mostrar texto. En ésta aprenderemos a utilizarlas para mostrar imágenes. 

La función de esta opción es fundamentalmente estética (mejorar la apariencia de la GUI), pero también puede tener utilidad si las imágenes permiten ilustrar los conceptos que se trabajan en la propia GUI.

Lo primero que hay que saber es que existe una limitación de base: la imagen debe presentarse en formato .gif para ser mostrada en la etiqueta, además de estar ubicada en el mismo directorio en el que ubiquemos el script.

El resto (el código y su explicación) te lo muestro a continuación. Al igual que en los videos anteriores, sigo la explicación de Lilina Castañón (2017), añadiendo elementos y variaciones de mi cosecha. Pero en la explicación me voy a limitar a lo que es nuevo. El script al completo, como en ocasiones anteriores, lo podrás ver en el enlace correspondiente al final de la entrada.

Primer paso: la primera novedad consiste en declarar la variable a asociar a la imagen:

img = tk.PhotoImage(file="imgtk.gif")
img =img.subsample(2,2) 

La primera línea asocia la variable img con la función (el método) tk.PhotImage(), que tiene file como atributo. Observa que el nombre de la imagen va entre comillas.

Se plantea aquí una primera cuestión: la identificación del archivo de la imagen indica que se encuentra en el mismo directorio que el script, pero ¿sería posible ubicarlo en un subdirectorio dentro de éste?

Para ello creo dicho subdirectorio y modifico la primera línea de código...

 img = tk.PhotoImage(file="img/imgtk.gif")

... y obtengo un resultado satisfactorio, luego es posible redireccionar la búsqueda del archivo img.gif a la posición deseada, pero habrá que tenerlo en cuenta a la hora de trasladar los materiales a un potencial usuario de los mismos. Para lo que interesa en este análisis, utilizaré la segunda formulación a fin de hacer más eficiente la gestión de recursos.

La segunda línea...

 img =img.subsample(2,2)

... tiene dos particularidades: se trata del uso de un segundo método asociado directamente a la gestión o trabajo con archivos de imagen (img.subsample()) y tiene como objetivo establecer un tamaño de imagen en sus dos dimensiones (ancho y alto) y en términos de proporción: (1,1) significa tamaño real, 2,2 significa la mitad del tamaño y así sucesivamente 

Segundo paso (después de crear la ventana, evidentemente) consiste en declarar la etiqueta y asignarle la imagen como contenido:

etq1 = tk.Label(image=img)

Esta es la forma básica, pero caben otras posibles que modifican la presentación que deriva de la anterior. Algunas de ellas pueden ser de interés, otras no tanto. 

etq1 = tk.Label(ventana,image=img)

etq1 = tk.Label(ventana,image=img,bg="red")

etq1 = tk.Label(ventana,image=img,text="Hola",bg="red") 

• Todas estas formulaciones añaden la referencia a la ventana, que curiosamente parece innecesaria cuando resulta fundamental en caso de etiquetas de texto.
• La segunda de estas formulaciones incluye el atributo color de fondo (bg), que es admisible y funcional, por lo que lo recomiendo
• La tercera incluye contenido textual, pero, aunque no da error, tampoco surte ningún efecto, predominando absolutamente la imagen, por lo que resulta superfluo. 

Por mi parte, recomiendo el uso de la segunda de estas alternativas:  

etq1= tk.Label(ventana,image=img,bg="red")

 Tercer paso consiste en asociar la etiqueta a la GUI mediante la fórmula...

etq1.pack()

.... la más simple, pero no la única, ya que también es posible (y creo que deseable) añadir referencias de tamaño y posicionamiento, como en esta segunda formulación:

 etq1.pack(padx=30,pady=30,ipadx=10,ipady=10)

... que es válida y funcional y, en mi opinión, preferible.

Para finalizar, aquí accedes al script trabajado en esta entrada