# Usar imágenes en una plantilla

Elija una imagen de activo, muéstrela en HTML o úsela como fondo de página, encabezado o pie de página.

Una imagen puede ser una parte fija del diseño, como un logotipo o el fondo de una página. Elija una imagen almacenada en **Assets** del proyecto o utilice una URL HTTPS para una imagen alojada en otro lugar.

Assets mantiene imágenes reutilizables en el proyecto y le permite seleccionarlas directamente desde el editor.

## 1. Seleccione una imagen de Assets

[Sube una imagen a Assets](/docs/es/assets/manage/) en el proyecto. En el editor, seleccione la parte que necesita la imagen, abra **Props**, agregue un accesorio y elija **Recurso**. Seleccione **Seleccionar imagen**, abra la carpeta y elija el archivo.

Por ejemplo, llame al accesorio `logo`. La aplicación almacena una referencia al archivo del proyecto seleccionado, por lo que no es necesario pegar una URL de descarga en la plantilla.

Al elegir una imagen diferente para el accesorio, se actualizan las ubicaciones de HTML usando ese mismo accesorio.

<figure class="doc-sim data-assets-illustration" aria-label="Propiedad de activo → Seleccionar imagen → elegir una imagen de proyecto">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Props</strong></div><div class="ds-node"><strong>logotipo</strong><span class="ds-type">Activo <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div class="ds-pad"><span class="sim-control sim-focus">▧ Seleccionar imagen</span></div><div class="ds-asset-grid"><div class="ds-asset sim-focus"><div class="ds-thumb"><span>T</span></div><strong>logotipo.png</strong><small>PNG</small></div><div class="ds-asset"><div class="ds-thumb"><span>T</span></div><strong>portada.jpg</strong><small>JPG</small></div></div></div></div>
<figcaption>Propiedad de activo → Seleccionar imagen → elegir una imagen de proyecto</figcaption>
</figure>

## 2. Muestra la imagen en HTML

En la sección que contiene el accesorio `logo`, use:

```handlebars
<img src="{{ props.logo }}" alt="Logo" class="logo" />
```

Para un accesorio de logotipo **Global**, use `{{ global.props.logo }}`. Establezca sus dimensiones en el CSS de la sección:

```css
.logo {
  width: 120px;
  height: 48px;
  object-fit: contain;
}
```

`contain` cabe la imagen completa dentro de la caja; `cover` llena el cuadro y puede recortar el contenido sobrante. Elija el comportamiento que desee en lugar de estirar la imagen en ambas dimensiones.

<figure class="doc-sim data-assets-illustration" aria-label="HTML → props.logo → imagen">
<div class="sim-stage"><div class="ds-code sim-focus"><code>&lt;img src="{{ props.logo }}"</code><code>     alt="Logo" class="logo" /&gt;</code></div><div class="ds-image-preview"><div class="ds-logo">Tembuilder</div><small>props.logo</small></div></div>
<figcaption>HTML → props.logo → imagen</figcaption>
</figure>

## 3. Usa una imagen como fondo

Para un fondo compartido, abra **Global → Config → Fondo de página** y elija una imagen. Para una sola página, selecciónela, abra **Config → Fondo → Fondo de página** y habilite su propio fondo.

**Tamaño**, **Posición** y **Repetición** controlan cómo la imagen llena el fondo. Por ejemplo, Cubrir rellena el área, Centro la coloca en el medio y Sin repetición evita el mosaico.

Los encabezados y pies de página tienen su propia configuración de fondo en Config. Consulte [Encabezados y pies de página](/docs/es/editor/header-footer/) para esas áreas.

<figure class="doc-sim data-assets-illustration" aria-label="Fondo → Imagen → elige tamaño y posición">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Fondo de página</strong></div><div class="ds-setting"><span>Imagen</span><span class="sim-control sim-focus">Seleccionar imagen</span></div><div class="ds-rows"><div><span>Tamaño</span><small>Portada</small></div><div><span>Posición</span><small>Centro</small></div><div><span>Repetir</span><small>No repetir</small></div></div></div><div class="ds-image-options"><span>contiene</span><span>portada</span></div></div>
<figcaption>Fondo → Imagen → elige tamaño y posición</figcaption>
</figure>

## 4. Utilice una URL de imagen externa

Puede colocar una URL HTTPS directamente en `src` cuando el espacio de trabajo permita imágenes externas. Debe devolver un **archivo de imagen pública**, en lugar de una página web que contenga una imagen o una URL que requiera iniciar sesión.

```html
<img src="https://example.com/images/banner.png" alt="" />
```

Las URL de imágenes externas aceptan **PNG, JPEG, WebP, GIF y AVIF**. Remoto **SVG no es compatible**; cargue SVG a través de Assets y selecciónelo con una propiedad de Activo. Las URL deben usar HTTPS en el puerto **443**, no tener nombre de usuario ni contraseña incorporados y resolverse en direcciones públicas; Las redirecciones también se verifican.

Límites por renderizado: **5 MiB por imagen**, **30 MiB en total**, **100 solicitudes de imagen** y **10 segundos por recuperación, incluidas las redirecciones**. Una URL pública aún puede fallar si su formato, tamaño o respuesta viola estos límites. En los planes que permiten imágenes externas, las fallas de recuperación fallan en el renderizado en lugar de omitir silenciosamente la imagen.

Si una imagen funciona en un navegador conectado pero no está en un PDF, verifique si su URL depende de una cookie o sesión. El renderizador debe recuperarlo independientemente de su navegador.

Para imágenes que ya están en Assets, use el selector de recursos en lugar de copiar una URL de vista previa. Cuando el acceso a los recursos no está disponible, la aplicación muestra el mensaje correspondiente; consulte [Límites del plan](/docs/es/plans/limits/) para obtener detalles de acceso al espacio de trabajo.

<figure class="doc-sim data-assets-illustration" aria-label="Utilice una URL que apunte directamente a un archivo de imagen pública">
<div class="sim-stage"><div class="ds-url-box sim-focus"><small>URL de imagen HTTPS</small><code>https://example.com/images/banner.png</code></div><div class="ds-source-path"><span>URL</span><span>→</span><span>Archivo de imagen</span><span>→</span><span>PDF</span></div></div>
<figcaption>Utilice una URL que apunte directamente a un archivo de imagen pública</figcaption>
</figure>