# AX - Imagen

## Descripción general

**AX - Imagen** es un componente de Experience Cloud que muestra imágenes en páginas de Experience Sites con control sobre el tamaño, el recorte, la alineación y el comportamiento de carga.

Úsalo para mostrar fotos de productos, logotipos, banners, fotos de perfil o cualquier contenido visual de Salesforce Content Documents, recursos estáticos o URL externas. Configura cómo se muestran, recortan y escalan las imágenes en Experience Builder sin código.

Perfecto para galerías de productos, encabezados de marca, secciones de contenido visual, vistas de perfil o cualquier lugar donde tu portal necesite una presentación de imágenes flexible con tamaño responsivo.

## Tutoriales

| Name                                                                                                                                                                                                                                               | Descripción                                                        |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| [**Configura el mapa para mostrar la información de detalles del registro**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/tutoriales/componentes/mapa/configura-el-mapa-para-mostrar-informacion-detallada-del-registro) | Aprende a mostrar registros en Experience Cloud usando Avonni Map. |

## Configuración

{% tabs %}
{% tab title="🎛️ Propiedades" %}

| Name                                                                 | Descripción                                                                                       | Uso                                                                                                                                                                                 |
| -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Imagen de CMS o URL de imagen**                                    | Especifica el origen de la imagen, ya sea desde un CMS o directamente mediante una URL de imagen. | Selecciona la fuente que mejor se adapte a tus preferencias de gestión de imágenes y garantice un acceso y actualizaciones sencillos.                                               |
| **Ancho y alto**                                                     | Determina el ancho y el alto de la imagen mostrada.                                               | Define dimensiones que garanticen que la imagen encaje armoniosamente dentro del diseño de la página mientras mantiene su claridad.                                                 |
| **Posición**                                                         | Ajusta la alineación de la imagen.                                                                | Alinea la imagen dentro de su contenedor para mantener un diseño de página equilibrado y estéticamente agradable.                                                                   |
| **Imagen estática**                                                  | Opción para establecer la imagen como estática.                                                   | Usa este ajuste cuando la imagen no requiera adaptaciones responsivas y se mantenga constante en distintos tamaños de pantalla.                                                     |
| **Fluido y crecimiento fluido**                                      | Estas opciones permiten que la imagen ajuste su tamaño de forma responsiva.                       | Activa estos ajustes para que las imágenes se adapten suavemente a distintos tamaños de pantalla, mejorando la capacidad de respuesta de la página web.                             |
| **Miniatura**                                                        | Mostrar la imagen como una miniatura.                                                             | Utiliza esta opción para presentar la imagen en un formato compacto, adecuado para galerías o como vista previa.                                                                    |
| **Carga diferida**                                                   | Elige entre carga automática o carga diferida de la imagen.                                       | Optimiza los tiempos de carga de la página seleccionando un método de carga que equilibre la visibilidad inmediata y el rendimiento general de la página.                           |
| **Tamaño de recorte, ajuste del recorte, posición de recorte X e Y** | Personaliza el recorte de la imagen para centrarte en las partes relevantes.                      | Define los parámetros de recorte para garantizar que la imagen muestre de forma destacada las áreas esenciales, mejorando la comunicación visual.                                   |
| **Tipo de lupa**                                                     | Selecciona el estilo de ampliación que se aplicará al ver los detalles de la imagen.              | Mejora la interacción del usuario eligiendo un tipo de lupa que permita explorar la imagen en detalle.                                                                              |
| **Imagen de comparación de CMS o URL de comparación**                | Personaliza los atributos de la función de comparación.                                           | Perfecciona la funcionalidad de comparación con atributos que determinen la orientación, la interacción y las etiquetas, garantizando una experiencia de comparación fácil de usar. |
| **Atributos de comparación**                                         | Define los detalles de la función de ampliación.                                                  | Personaliza el comportamiento y la apariencia de la lupa para garantizar que los usuarios puedan explorar fácilmente los detalles de la imagen.                                     |
| **Atributos de la lupa**                                             | Ajusta el redondeo de las esquinas de la imagen.                                                  | Suaviza o afila las esquinas de la imagen configurando un radio de borde adecuado, contribuyendo a la presentación estilística de la imagen.                                        |
| {% endtab %}                                                         |                                                                                                   |                                                                                                                                                                                     |

{% tab title="🎨 Estilo" %}

{% endtab %}
{% endtabs %}