> 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-it/experience-components/ax-image.md). # AX - Immagine ## Panoramica **AX - Immagine** è un componente di Experience Cloud che visualizza immagini nelle pagine di Experience Sites con controllo su dimensioni, ritaglio, allineamento e comportamento di caricamento. Usalo per mostrare foto di prodotti, loghi, banner, immagini del profilo o qualsiasi contenuto visivo da Salesforce Content Documents, risorse statiche o URL esterni. Configura come le immagini vengono visualizzate, ritagliate e ridimensionate in Experience Builder senza codice. Perfetto per gallerie di prodotti, intestazioni con branding, sezioni di contenuti visivi, visualizzazioni del profilo o ovunque il tuo portale necessiti di una presentazione flessibile delle immagini con dimensionamento reattivo. ## Tutorial | Nome | Descrizione | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | | [**Imposta la mappa per mostrare le informazioni dettagliate del record**](/experience-cloud/experience-cloud-it/tutorial/components/map/set-up-the-map-to-show-record-details-information.md) | Impara a visualizzare i record su Experience Cloud usando Avonni Map. | ## Impostazioni {% tabs %} {% tab title="🎛️ Proprietà" %} | Nome | Descrizione | Utilizzo | | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Immagine CMS o URL immagine** | Specifica la fonte dell'immagine, da un CMS o direttamente tramite un URL dell'immagine. | Seleziona la fonte che meglio si adatta alle tue preferenze di gestione delle immagini e garantisce facile accesso e aggiornamenti. | | **Larghezza e altezza** | Determina la larghezza e l'altezza dell'immagine visualizzata. | Imposta dimensioni che garantiscano che l'immagine si adatti armoniosamente al layout della pagina mantenendo la sua nitidezza. | | **Posizione** | Regola l'allineamento dell'immagine. | Allinea l'immagine all'interno del suo contenitore per mantenere un layout della pagina equilibrato ed esteticamente gradevole. | | **Immagine statica** | Opzione per impostare l'immagine come statica. | Usa questa impostazione quando l'immagine non richiede adattamenti responsive e rimane costante su varie dimensioni dello schermo. | | **Fluid e Fluid Grow** | Queste opzioni consentono all'immagine di adattare le sue dimensioni in modo reattivo. | Abilita queste impostazioni affinché le immagini si adattino senza problemi a diverse dimensioni dello schermo, migliorando la reattività della pagina web. | | **Miniatura** | Visualizza l'immagine come miniatura. | Utilizza questa opzione per presentare l'immagine in forma compatta, adatta a gallerie o anteprime. | | **Caricamento lazy** | Scegli tra caricamento automatico o lazy dell'immagine. | Ottimizza i tempi di caricamento della pagina selezionando un metodo di caricamento che bilanci la visibilità immediata e le prestazioni complessive della pagina. | | **Dimensione ritaglio, adattamento ritaglio, posizione ritaglio X e Y** | Personalizza il ritaglio dell'immagine per mettere a fuoco le parti rilevanti. | Definisci i parametri di ritaglio per garantire che l'immagine mostri in evidenza le aree essenziali, migliorando la comunicazione visiva. | | **Tipo di lente d'ingrandimento** | Seleziona lo stile di ingrandimento da applicare durante la visualizzazione dei dettagli dell'immagine. | Migliora l'interazione dell'utente scegliendo un tipo di lente d'ingrandimento che consenta un'esplorazione dettagliata dell'immagine. | | **Immagine di confronto CMS o URL di confronto** | Personalizza gli attributi della funzionalità di confronto. | Affina la funzionalità di confronto con attributi che ne definiscono orientamento, interazione ed etichettatura, garantendo un'esperienza di confronto semplice per l'utente. | | **Attributi di confronto** | Definisci i dettagli della funzionalità di ingrandimento. | Personalizza il comportamento e l'aspetto della lente di ingrandimento per garantire che gli utenti possano esplorare facilmente i dettagli dell'immagine. | | **Attributi della lente di ingrandimento** | Regola l'arrotondamento degli angoli dell'immagine. | Ammorbidisci o accentua gli angoli dell'immagine impostando un raggio del bordo appropriato, contribuendo alla presentazione stilistica dell'immagine. | | {% endtab %} | | | {% tab title="🎨 Stile" %} {% 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-it/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.