Images et intégrations

Ajoutez des images, intégrez des vidéos et insérez du contenu interactif via des iframes dans votre documentation.

Ajoutez des images pour fournir du contexte visuel, des exemples ou pour agrémenter votre documentation.

Utilisez la syntaxe Markdown pour ajouter des images à votre documentation :

![Texte alternatif décrivant l'image](/images/screenshot.png)

Les chemins d’image sont relatifs à la racine de votre dépôt de documentation. Par exemple, si votre image se trouve à images/screenshot.png dans votre dépôt, le chemin est /images/screenshot.png. Les chemins relatifs (par exemple, ./screenshot.png) ne sont pas pris en charge.

Les fichiers image doivent faire moins de 20 Mo. Pour les fichiers plus volumineux, hébergez-les sur un service CDN comme Amazon S3 ou Cloudinary.

Pour un meilleur contrôle de l’affichage des images, utilisez des balises HTML <img> :

<img 
  src="/images/dashboard.png" 
  alt="Interface principale du tableau de bord"
  style={{height: "300px", width: "400px"}}
  className="rounded-lg"
/>

Utilisez des styles JSX en ligne avec l’attribut style pour redimensionner les images :

<img
  src="/images/architecture.png"
  style={{width: "450px", height: "auto"}}
  alt="Diagramme illustrant l'architecture du système"
/>

Pour désactiver le zoom par défaut au clic sur les images, ajoutez la propriété noZoom :

<img 
  src="/images/screenshot.png" 
  alt="Texte alternatif descriptif"
  noZoom
/>

Pour rendre une image cliquable, placez l’image dans une balise d’ancre et ajoutez la propriété noZoom :

<a href="https://mintlify.com" target="_blank">
  <img 
    src="/images/logo.png" 
    alt="Logo Mintlify"
    noZoom
  />
</a>

Ajoutez des commandes de copie et de téléchargement à une image avec la propriété actions. Lorsqu’elle est activée, des boutons apparaissent en superposition au survol, à la mise au point ou au toucher, permettant aux lecteurs de copier l’image dans le presse-papiers ou de l’enregistrer sur leur appareil.

Définissez actions sur true pour afficher les deux boutons, ou passez une liste séparée par des virgules pour activer des actions spécifiques :

<img
  src="/images/diagram.png"
  alt="Diagramme de l’architecture du système"
  actions
/>

<img
  src="/images/diagram.png"
  alt="Diagramme de l’architecture du système"
  actions="copy,download"
/>

Valeurs prises en charge pour actions :

• copy : Copie l’image dans le presse-papiers.
• download : Télécharge l’image sous forme de fichier.

Utilisez la propriété actionsPlacement pour positionner les boutons. La valeur par défaut est bottom-center.

<img
  src="/images/diagram.png"
  alt="Diagramme de l’architecture du système"
  actions="download"
  actionsPlacement="top-right"
/>

Valeurs prises en charge pour actionsPlacement : bottom-center, bottom-left, bottom-right, top-center, top-left, top-right.

Pour afficher des images différentes en mode clair et en mode sombre, utilisez les classes Tailwind CSS :

<!-- Image en mode clair -->
<img 
  className="block dark:hidden" 
  src="/images/light-mode.png" 
  alt="Interface en mode clair"
/>

<!-- Image en mode sombre -->
<img 
  className="hidden dark:block" 
  src="/images/dark-mode.png" 
  alt="Interface en mode sombre"
/>

Les fichiers SVG qui utilisent des éléments foreignObject s’affichent différemment en production qu’en développement local. Le CDN d’images de Mintlify supprime foreignObject des SVG à titre de mesure de sécurité, ce qui peut tronquer ou masquer du texte et d’autres contenus HTML intégrés.

Cela affecte fréquemment les SVG exportés à partir d’outils comme draw.io lorsque le formatage de texte HTML ou le renvoi à la ligne est activé. Pour corriger cela, désactivez Formatted Text et Word Wrap sur tous les libellés de votre diagramme avant d’exporter en SVG. Consultez la documentation draw.io pour plus d’informations sur les exportations SVG.

Mintlify prend en charge les balises HTML dans Markdown, ce qui vous offre la flexibilité nécessaire pour créer du contenu riche.

Intégrez des vidéos YouTube à l’aide d’éléments iframe :

<iframe
  className="w-full aspect-video rounded-xl"
  src="https://www.youtube.com/embed/4KzFe50RQkQ"
  title="Lecteur vidéo YouTube"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

Utilisez l’élément HTML <video> pour des vidéos auto‑hébergées :

<video
  controls
  className="w-full aspect-video rounded-xl"
  src="lien-vers-votre-video.com"
></video>

Pour lancer automatiquement une vidéo, utilisez :

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full aspect-video rounded-xl"
  src="/videos/demo.mp4"
></video>

Intégrez du contenu externe à l’aide d’éléments iframe :

<iframe 
  src="https://example.com/embed" 
  title="Contenu intégré"
  className="w-full h-96 rounded-xl"
></iframe>

<Frame>
  <iframe 
    src="https://example.com/embed" 
    title="Contenu intégré"
    className="w-full h-96 rounded-xl"
  ></iframe>
</Frame>