Images et intégrations

Ajoutez des images, intégrez des vidéos et incluez du contenu interactif avec des iframes dans votre documentation. Toutes les ressources statiques de votre dépôt de documentation sont automatiquement servies au bon chemin sur votre domaine. Par exemple, si vous avez /images/my-logo.png dans votre dépôt, l’image sera disponible à l’adresse https://docs.yoursite.com/images/my-logo.png.

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 épars.

Images

Ajoutez des images pour offrir un contexte visuel, illustrer par des exemples ou enrichir votre documentation.

Syntaxe d’image de base

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

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

Incluez toujours un texte alternatif descriptif pour améliorer l’accessibilité et le référencement (SEO). Le texte alternatif doit décrire clairement ce que montre l’image.

Les fichiers image doivent peser 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 mieux contrôler l’affichage des images, utilisez les balises HTML <img> :

<img 
  src="/images/dashboard.png" 
  alt="Interface du tableau de bord principal"
  height="300"
  className="rounded-lg"
/>

Désactiver la fonction de zoom

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 
  height="200"
/>

Lier des images

Pour rendre une image cliquable, enveloppez-la 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 
    height="100"
  />
</a>

Les images placées dans des balises d’ancre affichent automatiquement un curseur en forme de pointeur pour indiquer qu’elles sont cliquables.

Images en mode clair et sombre

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"
/>

Vidéos

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

Incluez toujours un texte de repli à l’intérieur des éléments vidéo pour les navigateurs qui ne prennent pas en charge la lecture vidéo.

Intégrations YouTube

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"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

Vidéos auto-hébergées

Utilisez l’élément HTML <video> pour le contenu vidéo auto‑hébergé :

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

Lecture automatique des vidéos

Pour lancer automatiquement la lecture d’une vidéo, utilisez :

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

Lorsqu’on utilise la syntaxe JSX, écrivez les attributs à deux mots en camelCase : autoPlay, playsInline, allowFullScreen.

iframes

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>

Référence du composant Frame

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

Démarrage

Configuration de base

Optimisation de l’IA

Composants

Pages API

Authentification et personnalisation

Guides

Intégrations

Contrôle de version et CI/CD

Images et intégrations

Images

Syntaxe d’image de base

Intégrations d’images HTML

Désactiver la fonction de zoom

Lier des images

Images en mode clair et sombre

Vidéos

Intégrations YouTube

Vidéos auto-hébergées

Lecture automatique des vidéos

iframes

Référence du composant Frame

​Images

​Syntaxe d’image de base

​Intégrations d’images HTML

​Désactiver la fonction de zoom

​Lier des images

​Images en mode clair et sombre

​Vidéos

​Intégrations YouTube

​Vidéos auto-hébergées

​Lecture automatique des vidéos

​iframes

​Ressources associées

Référence du composant Frame

Images

Syntaxe d’image de base

Intégrations d’images HTML

Désactiver la fonction de zoom

Lier des images

Images en mode clair et sombre

Vidéos

Intégrations YouTube

Vidéos auto-hébergées

Lecture automatique des vidéos

iframes

Ressources associées