mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
57bdf74c00
* docs: document image copy and download actions * docs: translate image copy and download actions to es, fr, zh --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
273 lines
8.3 KiB
Plaintext
273 lines
8.3 KiB
Plaintext
---
|
||
title: "Images et intégrations"
|
||
description: "Ajoutez des images, intégrez des vidéos YouTube et incluez des iframes dans vos pages MDX pour enrichir la documentation avec du contenu visuel et interactif."
|
||
keywords: ["images", "vidéos", "iframes", "médias", "svg"]
|
||
---
|
||
|
||
Ajoutez des images, intégrez des vidéos et insérez du contenu interactif via des iframes dans votre documentation.
|
||
|
||
<Frame>
|
||
<img className="rounded-xl" src="https://mintlify-assets.b-cdn.net/bigbend.jpg" alt="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." />
|
||
</Frame>
|
||
|
||
<div id="images">
|
||
## Images
|
||
</div>
|
||
|
||
Ajoutez des images pour fournir du contexte visuel, des exemples ou pour agrémenter votre documentation.
|
||
|
||
<div id="basic-image-syntax">
|
||
### Syntaxe d’image de base
|
||
</div>
|
||
|
||
Utilisez la [syntaxe Markdown](https://www.markdownguide.org/basic-syntax/#images) pour ajouter des images à votre documentation :
|
||
|
||
```mdx
|
||
|
||
```
|
||
|
||
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.
|
||
|
||
<Tip>
|
||
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.
|
||
</Tip>
|
||
|
||
Les fichiers image doivent faire moins de 20 Mo. Pour les fichiers plus volumineux, hébergez-les sur un service CDN comme [Amazon S3](https://aws.amazon.com/s3) ou [Cloudinary](https://cloudinary.com).
|
||
|
||
<div id="html-image-embeds">
|
||
### Intégrations d’images HTML
|
||
</div>
|
||
|
||
Pour un meilleur contrôle de l’affichage des images, utilisez des balises HTML `<img>` :
|
||
|
||
```jsx
|
||
<img
|
||
src="/images/dashboard.png"
|
||
alt="Interface principale du tableau de bord"
|
||
style={{height: "300px", width: "400px"}}
|
||
className="rounded-lg"
|
||
/>
|
||
```
|
||
|
||
<div id="resize-images-with-inline-styles">
|
||
#### Redimensionner des images avec des styles en ligne
|
||
</div>
|
||
|
||
Utilisez des styles JSX en ligne avec l’attribut `style` pour redimensionner les images :
|
||
|
||
```jsx
|
||
<img
|
||
src="/images/architecture.png"
|
||
style={{width: "450px", height: "auto"}}
|
||
alt="Diagramme illustrant l'architecture du système"
|
||
/>
|
||
```
|
||
|
||
<div id="disable-image-zoom">
|
||
#### Désactiver le zoom des images
|
||
</div>
|
||
|
||
Pour désactiver le zoom par défaut au clic sur les images, ajoutez la propriété `noZoom` :
|
||
|
||
```html highlight="4"
|
||
<img
|
||
src="/images/screenshot.png"
|
||
alt="Texte alternatif descriptif"
|
||
noZoom
|
||
/>
|
||
```
|
||
|
||
|
||
<div id="link-images">
|
||
#### Lier des images
|
||
</div>
|
||
|
||
Pour rendre une image cliquable, placez l’image dans une balise d’ancre et ajoutez la propriété `noZoom` :
|
||
|
||
```html
|
||
<a href="https://mintlify.com" target="_blank">
|
||
<img
|
||
src="/images/logo.png"
|
||
alt="Logo Mintlify"
|
||
noZoom
|
||
/>
|
||
</a>
|
||
```
|
||
|
||
<Note>
|
||
Les images à l’intérieur des balises d’ancrage affichent automatiquement un curseur en forme de pointeur pour indiquer qu’elles sont cliquables.
|
||
</Note>
|
||
|
||
<div id="copy-and-download-actions">
|
||
#### Actions de copie et de téléchargement
|
||
</div>
|
||
|
||
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 :
|
||
|
||
```html
|
||
<img
|
||
src="/images/diagram.png"
|
||
alt="Diagramme de l’architecture du système"
|
||
actions
|
||
/>
|
||
```
|
||
|
||
```html
|
||
<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`.
|
||
|
||
```html
|
||
<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`.
|
||
|
||
<div id="light-and-dark-mode-images">
|
||
#### Images pour les modes clair et sombre
|
||
</div>
|
||
|
||
Pour afficher des images différentes en mode clair et en mode sombre, utilisez les classes Tailwind CSS :
|
||
|
||
```html
|
||
<!-- 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"
|
||
/>
|
||
```
|
||
|
||
<div id="svg-images">
|
||
### Images SVG
|
||
</div>
|
||
|
||
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](https://www.drawio.com) 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](https://www.drawio.com/doc/faq/svg-export-text-problems) pour plus d'informations sur les exportations SVG.
|
||
|
||
<div id="videos">
|
||
## Vidéos
|
||
</div>
|
||
|
||
Mintlify prend en charge les [balises HTML dans Markdown](https://www.markdownguide.org/basic-syntax/#html), ce qui vous offre la flexibilité nécessaire pour créer du contenu riche.
|
||
|
||
<Tip>
|
||
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.
|
||
</Tip>
|
||
|
||
<div id="youtube-embeds">
|
||
### Intégrations YouTube
|
||
</div>
|
||
|
||
Intégrez des vidéos YouTube à l'aide d'éléments iframe :
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
<Frame>
|
||
<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 />
|
||
</Frame>
|
||
|
||
|
||
<div id="self-hosted-videos">
|
||
### Vidéos auto‑hébergées
|
||
</div>
|
||
|
||
Utilisez l’élément HTML `<video>` pour des vidéos auto‑hébergées :
|
||
|
||
```html
|
||
<video
|
||
controls
|
||
className="w-full aspect-video rounded-xl"
|
||
src="lien-vers-votre-video.com"
|
||
></video>
|
||
```
|
||
|
||
<div id="autoplay-videos">
|
||
### Lecture automatique de vidéos
|
||
</div>
|
||
|
||
Pour lancer automatiquement une vidéo, utilisez :
|
||
|
||
```html
|
||
<video
|
||
autoPlay
|
||
muted
|
||
loop
|
||
playsInline
|
||
className="w-full aspect-video rounded-xl"
|
||
src="/videos/demo.mp4"
|
||
></video>
|
||
```
|
||
|
||
<Note>
|
||
Lorsque vous utilisez la syntaxe JSX, écrivez les attributs composés de deux mots en camelCase : `autoPlay`, `playsInline`, `allowFullScreen`.
|
||
</Note>
|
||
|
||
<div id="iframes">
|
||
## Iframes
|
||
</div>
|
||
|
||
Intégrez du contenu externe à l’aide d’éléments iframe :
|
||
|
||
```html
|
||
<iframe
|
||
src="https://example.com/embed"
|
||
title="Contenu intégré"
|
||
className="w-full h-96 rounded-xl"
|
||
></iframe>
|
||
```
|
||
|
||
<Tip>
|
||
Encapsulez les iframes dans un composant [frame](/fr/components/frames) pour les maintenir dans la largeur de la colonne de texte et éviter tout débordement.
|
||
|
||
```html
|
||
<Frame>
|
||
<iframe
|
||
src="https://example.com/embed"
|
||
title="Contenu intégré"
|
||
className="w-full h-96 rounded-xl"
|
||
></iframe>
|
||
</Frame>
|
||
```
|
||
</Tip>
|
||
|
||
<div id="related-resources">
|
||
## Ressources connexes
|
||
</div>
|
||
|
||
<Card title="Référence du composant Frame" icon="frame" horizontal href="/fr/components/frames">
|
||
Découvrez comment utiliser le composant Frame pour présenter des images.
|
||
</Card> |