Fügen Sie Ihrer Dokumentation Bilder hinzu, betten Sie Videos ein und binden Sie interaktive Inhalte per iFrame ein. Alle statischen Assets in Ihrem Docs-Repository werden automatisch unter dem entsprechenden Pfad auf Ihrer Domain ausgeliefert. Wenn Sie beispielsweise /images/my-logo.png in Ihrem Repo haben, ist das Bild unter https://docs.yoursite.com/images/my-logo.png verfügbar.
Foto einer malerischen Landschaft mit violetten Blumen im Vordergrund, Bergen im Hintergrund und blauem Himmel mit vereinzelten Wolken.

​
Bilder

Fügen Sie Bilder hinzu, um Ihrer Dokumentation visuellen Kontext, Beispiele oder dekorative Elemente hinzuzufügen.

​
Grundlegende Bildsyntax

Verwende die Markdown-Syntax, um Bilder zu deiner Dokumentation hinzuzufügen: 
![Alttext, der das Bild beschreibt](/path/to/image.png)
Füge immer einen aussagekräftigen Alttext hinzu, um Barrierefreiheit und SEO zu verbessern. Der Alttext sollte klar beschreiben, was auf dem Bild zu sehen ist.
Bilddateien müssen kleiner als 20 MB sein. Größere Dateien solltest du über einen CDN-Dienst wie Amazon S3 oder Cloudinary hosten.

​
HTML-Bildeinbettungen

Für mehr Kontrolle über die Bilddarstellung verwenden Sie HTML-<img>-Tags: 
<img 
  src="/images/dashboard.png" 
  alt="Main dashboard interface"
  height="300"
  className="rounded-lg"
/>

​
Zoomfunktion deaktivieren

Um das standardmäßige Zoomen beim Klicken auf Bilder zu deaktivieren, fügen Sie die Eigenschaft noZoom hinzu: 
<img 
  src="/images/screenshot.png" 
  alt="Descriptive alt text"
  noZoom 
  height="200"
/>
Um ein Bild anklickbar zu machen, umschließe es mit einem Anchor-Tag und füge die Eigenschaft noZoom hinzu: 
<a href="https://mintlify.com" target="_blank">
  <img 
    src="/images/logo.png" 
    alt="Mintlify-Logo"
    noZoom 
    height="100"
  />
</a>
Bilder innerhalb von Anchor-Tags zeigen automatisch den Mauszeiger als Hand an, um ihre Klickbarkeit anzuzeigen.

​
Bilder für hellen und dunklen Modus

Um unterschiedliche Bilder für helle und dunkle Themes anzuzeigen, verwenden Sie Tailwind CSS-Klassen: 
<!-- Bild für hellen Modus -->
<img 
  className="block dark:hidden" 
  src="/images/light-mode.png" 
  alt="Benutzeroberfläche im hellen Modus"
/>

<!-- Bild für dunklen Modus -->
<img 
  className="hidden dark:block" 
  src="/images/dark-mode.png" 
  alt="Benutzeroberfläche im dunklen Modus"
/>

​
Videos

Mintlify unterstützt HTML-Tags in Markdown und gibt Ihnen die Flexibilität, reichhaltige Inhalte zu erstellen.
Fügen Sie stets einen Fallback-Text innerhalb von Videoelementen ein, für Browser, die keine Videowiedergabe unterstützen.

​
YouTube-Einbettungen

Binden Sie YouTube-Videos mit iframe-Elementen ein: 
<iframe
  className="w-full aspect-video rounded-xl"
  src="https://www.youtube.com/embed/4KzFe50RQkQ"
  title="YouTube video player"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

​
Selbstgehostete Videos

Verwenden Sie das HTML-Element <video> für selbstgehostete Videoinhalte: 
<video
  controls
  className="w-full aspect-video rounded-xl"
  src="link-to-your-video.com"
></video>

​
Videos automatisch abspielen

Um ein Video automatisch abzuspielen, verwende: 
<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full aspect-video rounded-xl"
  src="/videos/demo.mp4"
></video>
Bei JSX-Syntax werden mehrteilige Attribute in camelCase geschrieben: autoPlay, playsInline, allowFullScreen.

​
iframes

Externe Inhalte mit iframe-Elementen einbetten: 
<iframe 
  src="https://example.com/embed" 
  title="Embedded content"
  className="w-full h-96 rounded-xl"
></iframe>

Referenz zur Frame-Komponente

Erfahren Sie, wie Sie die Frame-Komponente zum Präsentieren von Bildern verwenden.