Nexus – Elemento: Image

image_pdfimage_print

¿Qué es?

Image es un componente de tipo Display. Permite insertar una imagen con URL configurable. Al arrastrarlo al lienzo viene con una imagen de ejemplo tipo placeholder (400×400).

Propiedades

Al seleccionar Image en el lienzo, el panel derecho muestra “Properties of Image” con las siguientes opciones:

  • Component ID: identificador único del componente, autogenerado (ej. img_ba0309b3).
  • Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
  • Image URL: campo donde se coloca la URL de la imagen a mostrar (ej. https://placehold.co/400).
  • Alt Text: texto alternativo de la imagen (accesibilidad / se muestra si la imagen no carga).
  • Variant: menú desplegable que define el tamaño con el que se muestra la imagen dentro de su espacio disponible. Opciones:
    • Thumbnail: la imagen se muestra en tamaño reducido, tipo miniatura.
    • Body: la imagen se muestra en un tamaño intermedio, como parte del contenido normal de la pantalla.
    • Header: la imagen se muestra ocupando el ancho completo disponible, como una imagen de cabecera.
  • Align: menú desplegable que define la alineación de la imagen dentro de su espacio. Opciones: Left, Center, Right.
  • Style → Custom Class: campo para asignar una clase CSS personalizada.
  • Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
  • Delete Component: elimina el componente del lienzo.
  • Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .

Ejemplo de uso

Para mostrar una imagen propia, se reemplaza el valor de Image URL por la dirección de la imagen deseada (debe ser una URL pública accesible). Por ejemplo, se puede usar una imagen libre de copyright de prueba:

https://picsum.photos/400/400

Con Variant se ajusta el tamaño según el uso: Thumbnail para íconos o miniaturas, Body para imágenes dentro del contenido, y Header para imágenes destacadas de ancho completo. Con Align se controla si queda alineada a la izquierda, centrada o a la derecha.