> 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-fr/experience-components/ax-image.md). # AX - Image ## Aperçu **AX - Image** est un composant Experience Cloud qui affiche des images sur les pages des sites Experience avec un contrôle du dimensionnement, du recadrage, de l’alignement et du comportement de chargement. Utilisez-le pour afficher des photos de produits, des logos, des bannières, des photos de profil ou tout autre contenu visuel provenant de Salesforce Content Documents, de ressources statiques ou d’URL externes. Configurez l’affichage, le recadrage et la mise à l’échelle des images dans Experience Builder, sans code. Idéal pour les galeries de produits, les en-têtes de marque, les sections de contenu visuel, les affichages de profil ou partout où votre portail a besoin d’une présentation d’image flexible avec un dimensionnement adaptatif. ## Tutoriels | Nom | Description | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | | [**Configurer la carte pour afficher les informations de détail des enregistrements**](/experience-cloud/experience-cloud-fr/tutoriels/components/map/set-up-the-map-to-show-record-details-information.md) | Apprenez à afficher des enregistrements sur Experience Cloud à l’aide d’Avonni Map. | ## Paramètres {% tabs %} {% tab title="🎛️ Propriétés" %} | Nom | Description | Utilisation | | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Image CMS ou URL de l’image** | Spécifiez la source de l’image, soit depuis un CMS, soit directement à l’aide d’une URL d’image. | Sélectionnez la source qui correspond le mieux à vos préférences de gestion des images et qui garantit un accès et des mises à jour faciles. | | **Largeur et hauteur** | Déterminez la largeur et la hauteur de l’image affichée. | Définissez des dimensions qui garantissent que l’image s’intègre harmonieusement dans la mise en page tout en conservant sa netteté. | | **Position** | Ajustez l’alignement de l’image. | Alignez l’image dans son conteneur afin de maintenir une mise en page équilibrée et esthétique. | | **Image statique** | Option permettant de définir l’image comme statique. | Utilisez ce paramètre lorsque l’image ne nécessite pas d’ajustements adaptatifs et reste constante sur différentes tailles d’écran. | | **Fluide et croissance fluide** | Ces options permettent à l’image d’ajuster sa taille de manière adaptative. | Activez ces paramètres pour que les images s’adaptent en douceur aux différentes tailles d’écran, améliorant ainsi la réactivité de la page Web. | | **Miniature** | Affichez l’image sous forme de miniature. | Utilisez cette option pour présenter l’image sous une forme compacte, adaptée aux galeries ou aux aperçus. | | **Chargement différé** | Choisissez entre le chargement automatique ou différé de l’image. | Optimisez les temps de chargement de la page en sélectionnant une méthode de chargement qui équilibre la visibilité immédiate et les performances globales de la page. | | **Taille de recadrage, ajustement du recadrage, position X et Y du recadrage** | Personnalisez le recadrage de l’image pour mettre l’accent sur les parties pertinentes. | Définissez les paramètres de recadrage pour garantir que l’image affiche clairement les zones essentielles, améliorant ainsi la communication visuelle. | | **Type de loupe** | Sélectionnez le style de grossissement à appliquer lors de l’affichage des détails de l’image. | Améliorez l’interaction utilisateur en choisissant un type de loupe qui permet une exploration détaillée de l’image. | | **Image CMS de comparaison ou URL de comparaison** | Personnalisez les attributs de la fonctionnalité de comparaison. | Affinez la fonction de comparaison avec des attributs qui définissent l’orientation, l’interaction et l’étiquetage, garantissant ainsi une expérience de comparaison conviviale. | | **Attributs de comparaison** | Définissez les spécificités de la fonctionnalité de grossissement. | Personnalisez le comportement et l’apparence de la loupe afin que les utilisateurs puissent explorer facilement les détails de l’image. | | **Attributs de la loupe** | Ajustez l’arrondi des coins de l’image. | Adoucissez ou accentuez les coins de l’image en définissant un rayon de bordure approprié, contribuant ainsi à la présentation stylistique de l’image. | | {% endtab %} | | | {% tab title="🎨 Style" %} {% 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-fr/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.