# Imagen

> Imágenes con ajuste, opacidad y radio; un visor con zoom. Un componente nativo de Pyzed para GUIs de escritorio en Python, con vista previa, ejemplos y su API.

Source: https://albakore.github.io/pyzed/es/library/image/

:::tip[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](https://albakore.github.io/pyzed/es/library/#contenido) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#image)

**Código:**

```python
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

```python
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

:::note[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

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

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

```python
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.

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

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

```python
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](https://albakore.github.io/pyzed/es/guides/events/) y [Eventos de cada componente](https://albakore.github.io/pyzed/es/library/events/).

## Propiedades y API

### `pz.image`

```python
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 →](https://albakore.github.io/pyzed/es/reference/widgets/#image)

### `pz.image_viewer`

```python
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 →](https://albakore.github.io/pyzed/es/reference/widgets/#image_viewer)

## Relacionados

- [Icono](https://albakore.github.io/pyzed/es/library/icon/): Iconos de Lucide por nombre e imágenes SVG.
- [Código QR](https://albakore.github.io/pyzed/es/library/qr-code/): Un código QR para cualquier texto o URL.