> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-image.md). # AX - Imagen ## Resumen **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 con marca, secciones de contenido visual, perfiles o cualquier lugar donde tu portal necesite una presentación de imágenes flexible con tamaño adaptable. ## Tutoriales | Nombre | Descripción | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | | [**Configura el mapa para mostrar información de detalles del registro**](/experience-cloud/experience-cloud-es/tutoriales/components/map/set-up-the-map-to-show-record-details-information.md) | Aprende a mostrar registros en Experience Cloud usando Avonni Map. | ## Configuración {% tabs %} {% tab title="🎛️ Propiedades" %} | Nombre | 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 que garantice un acceso y actualizaciones sencillos. | | **Ancho y alto** | Determina el ancho y el alto de la imagen mostrada. | Establece dimensiones que garanticen que la imagen encaje armoniosamente en el diseño de la página sin perder nitidez. | | **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 esta configuración cuando la imagen no requiera ajustes adaptativos y permanezca constante en distintos tamaños de pantalla. | | **Fluido y Fluido ampliable** | Estas opciones permiten que la imagen ajuste su tamaño de forma adaptable. | Activa estas opciones para que las imágenes se adapten suavemente a diferentes tamaños de pantalla, mejorando la capacidad de respuesta de la página web. | | **Miniatura** | Muestra la imagen como una miniatura. | Utiliza esta opción para presentar la imagen de forma compacta, adecuada para galerías o como vista previa. | | **Carga diferida** | Elige entre la carga automática o 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 del 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 el etiquetado, garantizando una experiencia de comparación fácil de usar. | | **Atributos de comparación** | Define los detalles específicos 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 acentúa las esquinas de la imagen estableciendo un radio de borde adecuado, lo que contribuye a la presentación estilística de la imagen. | | {% endtab %} | | | {% tab title="🎨 Estilo" %} {% endtab %} {% endtabs %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-image.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.