Usar imágenes en una plantilla

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

2. Muestra la imagen en HTML

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

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

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

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 para esas áreas.

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.

<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 para obtener detalles de acceso al espacio de trabajo.