Imagen

En pocas palabras

Muestra una imagen de un archivo: una foto, un logo, una captura.

pz.image(source) muestra un PNG, JPEG, GIF, WebP, BMP… desde una ruta, bytes o píxeles RGBA con size=(w, h). Opciones: content_fit ("contain", "cover", "fill", "none", "scale_down"), filter ("linear" o "nearest"), opacity, radius, rotation y scale. pz.image_viewer añade desplazamiento (arrastrar) y zoom (rueda).

pz.image · Categoría: Contenido · Referencia completa →

Vista previa

Código

pz.row([
    pz.image("photo.png", width=300, height=180, content_fit="cover", radius=10),
    pz.image("photo.png", width=140, height=180, content_fit="contain", opacity=0.5),
], spacing=16, align="center")

Cuándo usarlo

• Para capturas, avatares, miniaturas y visores de fotos.

Uso

import pyzed as pz

pz.row([
    pz.image("photo.png", width=300, height=180, content_fit="cover", radius=10),
    pz.image("photo.png", width=140, height=180, content_fit="contain", opacity=0.5),
], spacing=16, align="center")

Variantes

Sobre estas capturas

Cada captura la graba pyzed mismo, fuera de pantalla a 2x, en One Dark o One Light según el tema de este sitio, y recortada al componente para que se vea a su tamaño real. El puntero pasa por encima, pulsa o escribe en él; un componente que no reacciona al puntero recorre algunos temas. Con movimiento reducido ves el primer fotograma. Abre Código bajo una captura para ver el fragmento que la dibuja; los nombres libres como on_save son tus propios callbacks.

Ajuste

content_fit="cover"

Código

pz.image("photo.png", width=200, height=110, content_fit="cover")

content_fit="contain"

Código

pz.image("photo.png", width=200, height=110, content_fit="contain")

content_fit="fill"

Código

pz.image("photo.png", width=200, height=110, content_fit="fill")

Aspecto

rotation va en grados, en sentido horario; las esquinas de una imagen girada pueden salir de su caja.

radius=16

Código

pz.image("photo.png", width=200, height=110, content_fit="cover", radius=16)

opacity=0.4

Código

pz.image("photo.png", width=200, height=110, content_fit="cover", opacity=0.4)

rotation=8

Código

pz.image("photo.png", width=200, height=110, content_fit="cover", radius=10, rotation=8)

Eventos

Imagen no tiene eventos propios: muestra lo que le das. Como todo widget, también tiene los 18 eventos comunes (click, double_click, right_click, mouse_enter, drag, key_down, resize…), que se conectan con .on(...): mira Eventos y Eventos de cada componente.

Propiedades y API

pz.image

image(
    source,
    *,
    width=None,
    height=None,
    content_fit=None,
    filter='linear',
    opacity=1.0,
    radius=0.0,
    rotation=0.0,
    scale=1.0,
    size=None,
)

Una imagen de mapa de bits (PNG, JPEG, GIF, BMP, WebP…) desde una ruta o bytes, o píxeles RGBA crudos.

Propiedad	Por defecto	Descripción
source	obligatorio	Ruta del archivo, bytes del archivo codificado, o píxeles RGBA crudos con size=(ancho, alto).
width	None	Ancho: píxeles, "fill", "shrink" o "fill:N" (proporción).
height	None	Alto: píxeles, "fill", "shrink" o "fill:N" (proporción).
content_fit	None	"contain", "cover", "fill", "none" o "scale-down".
filter	"linear"	"linear" (suave) o "nearest" (píxeles nítidos, para pixel art).
opacity	1.0	Opacidad de 0 a 1.
radius	0.0	Radio de las esquinas.
rotation	0.0	Rotación en grados.
scale	1.0	Escala.
size	None	(ancho, alto) cuando source son píxeles RGBA crudos.

Referencia completa →

pz.image_viewer

image_viewer(
    source,
    *,
    width=None,
    height=None,
    min_scale=0.25,
    max_scale=10.0,
    scale_step=0.1,
    filter='linear',
    size=None,
)

Una imagen que se puede desplazar (arrastrando) y ampliar (rueda del ratón), como el visor de Iced.

Propiedad	Por defecto	Descripción
source	obligatorio	Ruta del archivo, bytes del archivo codificado, o píxeles RGBA crudos con size=(ancho, alto).
width	None	Ancho: píxeles, "fill", "shrink" o "fill:N" (proporción).
height	None	Alto: píxeles, "fill", "shrink" o "fill:N" (proporción).
min_scale	0.25	Zoom mínimo.
max_scale	10.0	Zoom máximo.
scale_step	0.1	Cuánto cambia el zoom por paso de rueda.
filter	"linear"	"linear" (suave) o "nearest" (píxeles nítidos, para pixel art).
size	None	(ancho, alto) para píxeles RGBA crudos.

Referencia completa →

Relacionados

IconoIconos de Lucide por nombre e imágenes SVG.

Código QRUn código QR para cualquier texto o URL.