# AX - Image

## Vue d’ensemble

**AX - Image** est un composant Experience Cloud qui affiche des images sur les pages des sites Experience, avec un contrôle sur le dimensionnement, le recadrage, l’alignement et le comportement de chargement.

Utilisez-le pour afficher des photos de produits, des logos, des bannières, des photos de profil ou tout contenu visuel provenant de Salesforce Content Documents, de ressources statiques ou d’URL externes. Configurez la manière dont les images s’affichent, se recadrent et s’adaptent 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 tout autre endroit où votre portail a besoin d’une présentation d’images flexible avec un dimensionnement adaptatif.

## Tutoriels

| Name                                                                                                                                                                                                                                                                        | Description                                                                         |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| [**Configurer la carte pour afficher les informations de détail de l’enregistrement**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/tutoriels/composants/carte-1/configurer-la-carte-pour-afficher-les-informations-de-detail-de-lenregistrement) | Apprenez à afficher des enregistrements sur Experience Cloud à l’aide d’Avonni Map. |

## Paramètres

{% tabs %}
{% tab title="🎛️ Propriétés" %}

| Name                                                                           | 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 d’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 permettent à l’image de s’intégrer 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 n’a pas besoin 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**                                                                  | Afficher l’image sous forme de miniature.                                                        | Utilisez cette option pour présenter l’image sous une forme compacte, adaptée aux galeries ou comme aperçu.                                                                          |
| **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 visibilité immédiate et performances globales de la page.                      |
| **Taille du recadrage, ajustement du recadrage, position de recadrage X et Y** | Personnalisez le recadrage de l’image pour mettre l’accent sur les parties pertinentes.          | Définissez les paramètres de recadrage pour garantir que les zones essentielles de l’image s’affichent en évidence, 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 fonctionnalité de comparaison avec des attributs qui définissent l’orientation, l’interaction et l’étiquetage, afin de garantir 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 pour permettre aux utilisateurs d’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 %}