Passer au contenu principal
Ajoutez des images, intégrez des vidéos et insérez du contenu interactif via des iframes dans votre documentation.
Photographie d’un paysage pittoresque avec des fleurs violettes au premier plan, des montagnes à l’arrière-plan et un ciel bleu parsemé de nuages.

​
Images

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

​
Syntaxe d’image de base

Utilisez la syntaxe Markdown pour ajouter des images à votre documentation :
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.
Incluez toujours un texte alternatif descriptif pour améliorer l’accessibilité et le SEO. Le texte alternatif doit décrire clairement ce que montre l’image.
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.

​
Intégrations d’images HTML

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

​
Redimensionner des images

Utilisez des classes Tailwind CSS pour redimensionner les images. Lorsqu’aucune classe utilitaire ne couvre la taille dont vous avez besoin, utilisez une valeur arbitraire comme w-[450px] :
Évitez la prop style pour le dimensionnement. Elle peut provoquer un décalage de la mise en page au chargement de la page.

​
Désactiver le zoom des images

Pour désactiver le zoom par défaut au clic sur les images, ajoutez la propriété noZoom :
Pour rendre une image cliquable, placez l’image dans une balise d’ancre et ajoutez la propriété noZoom :
Les images à l’intérieur des balises d’ancrage affichent automatiquement un curseur en forme de pointeur pour indiquer qu’elles sont cliquables.

​
Actions de copie et de téléchargement

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 :
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.
Valeurs prises en charge pour actionsPlacement : bottom-center, bottom-left, bottom-right, top-center, top-left, top-right.

​
Images pour les modes clair et sombre

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

​
Optimisation automatique des images

Mintlify optimise les images stockées dans votre dépôt de documentation lorsqu’il les diffuse. Vous n’avez pas besoin de convertir les formats, de générer plusieurs tailles ni de définir les dimensions vous-même. L’optimisation s’applique aux images que vous référencez avec un chemin relatif à la racine, comme /images/screenshot.png. Cela inclut les images Markdown, les balises <img>, les propriétés d’image et d’icône des composants, ainsi que le logo, l’arrière-plan et le favicon de votre docs.json. Pour chaque image optimisée, Mintlify :
  • Diffuse de l’AVIF ou du WebP aux navigateurs qui les prennent en charge, et le format d’origine aux autres.
  • Compresse l’image et supprime les métadonnées, comme les données EXIF.
  • Génère des versions redimensionnées jusqu’à 2500px de large afin que les navigateurs téléchargent la plus petite version adaptée à la mise en page. Les images ne sont jamais agrandies au-delà de leur taille d’origine.
  • Ajoute la largeur et la hauteur d’origine à l’image pour que la page ne se décale pas pendant le chargement des images. Si vous définissez width ou height sur une balise <img>, Mintlify utilise vos valeurs à la place.
Mintlify diffuse ces images telles qu’elles sont dans votre dépôt, sans optimisation :
  • Les GIFs, afin que les animations continuent de fonctionner.
  • Les fichiers SVG et ICO.
  • Les images référencées avec une URL absolue, comme les images hébergées sur un CDN externe.
  • Les images des pages qui nécessitent une authentification.
Compressez les GIFs et les images hébergées en externe avant de les ajouter à votre documentation. Lorsque vous mettez à jour un fichier image dans votre dépôt, Mintlify diffuse la nouvelle version à une nouvelle URL, afin que les lecteurs ne voient pas une copie en cache de l’ancienne image.

​
Images SVG

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.

​
Vidéos

Mintlify prend en charge les balises HTML dans Markdown, ce qui vous offre la flexibilité nécessaire pour créer du contenu riche.
Incluez toujours un texte de remplacement à l’intérieur des éléments vidéo pour les navigateurs qui ne prennent pas en charge la lecture des vidéos.

​
Intégrations YouTube

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

​
Vidéos auto‑hébergées

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

​
Lecture automatique de vidéos

Pour lancer automatiquement une vidéo, utilisez :
Lorsque vous utilisez la syntaxe JSX, écrivez les attributs composés de deux mots en camelCase : autoPlay, playsInline, allowFullScreen.

​
Iframes

Intégrez du contenu externe à l’aide d’éléments iframe :
Encapsulez les iframes dans un composant frame pour les maintenir dans la largeur de la colonne de texte et éviter tout débordement.

Référence du composant Frame

Découvrez comment utiliser le composant Frame pour présenter des images.