Añade imágenes, inserta videos e incluye contenido interactivo con iframes en tu documentación. Todos los recursos estáticos de tu repositorio de documentación se sirven automáticamente en la ruta correspondiente de tu dominio. Por ejemplo, si tienes /images/my-logo.png en tu repositorio, la imagen estará disponible en https://docs.yoursite.com/images/my-logo.png.
Fotografía de un paisaje pintoresco con flores moradas en primer plano, montañas al fondo y un cielo azul con nubes dispersas.

​
Imágenes

Añade imágenes para aportar contexto visual, ejemplos o elementos decorativos a tu documentación.

​
Sintaxis básica de imágenes

Usa la sintaxis de Markdown para agregar imágenes a tu documentación: 
![Texto alternativo que describe la imagen](/path/to/image.png)
Incluye siempre texto alternativo descriptivo para mejorar la accesibilidad y el SEO. El texto alternativo debe describir claramente lo que muestra la imagen.
Los archivos de imagen deben pesar menos de 20 MB. Para archivos más grandes, alójalos en un servicio CDN como Amazon S3 o Cloudinary.

​
Inserciones de imágenes en HTML

Para tener más control sobre la visualización de las imágenes, usa etiquetas HTML <img>: 
<img 
  src="/images/dashboard.png" 
  alt="Interfaz principal del panel"
  height="300"
  className="rounded-lg"
/>

​
Desactivar la función de zoom

Para desactivar el zoom predeterminado al hacer clic en las imágenes, agrega la propiedad noZoom: 
<img 
  src="/images/screenshot.png" 
  alt="Texto alternativo descriptivo"
  noZoom 
  height="200"
/>
Para convertir una imagen en un enlace clicable, envuelve la imagen en una etiqueta de enlace y agrega la propiedad noZoom: 
<a href="https://mintlify.com" target="_blank">
  <img 
    src="/images/logo.png" 
    alt="Logotipo de Mintlify"
    noZoom 
    height="100"
  />
</a>
Las imágenes dentro de etiquetas de enlace muestran automáticamente un cursor de puntero para indicar que se pueden clicar.

​
Imágenes para modo claro y modo oscuro

Para mostrar imágenes diferentes en los temas claro y oscuro, usa clases de Tailwind CSS: 
<!-- Imagen para modo claro -->
<img 
  className="block dark:hidden" 
  src="/images/light-mode.png" 
  alt="Interfaz en modo claro"
/>

<!-- Imagen para modo oscuro -->
<img 
  className="hidden dark:block" 
  src="/images/dark-mode.png" 
  alt="Interfaz en modo oscuro"
/>

​
Videos

Mintlify admite etiquetas HTML en Markdown, lo que te brinda flexibilidad para crear contenido enriquecido.
Incluye siempre texto de respaldo dentro de los elementos de video para los navegadores que no admiten la reproducción de video.

​
Inserciones de YouTube

Incorpora videos de YouTube usando elementos iframe: 
<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>

​
Videos autohospedados

Usa el elemento HTML <video> para contenido de video autohospedado: 
<video
  controls
  className="w-full aspect-video rounded-xl"
  src="link-to-your-video.com"
></video>

​
Reproducción automática de videos

Para reproducir un video automáticamente, usa: 
<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full aspect-video rounded-xl"
  src="/videos/demo.mp4"
></video>
Al usar la sintaxis de JSX, escribe los atributos de dos palabras en camelCase: autoPlay, playsInline, allowFullScreen.

​
iframes

Incorpora contenido externo con elementos iframe: 
<iframe 
  src="https://example.com/embed" 
  title="Embedded content"
  className="w-full h-96 rounded-xl"
></iframe>

Referencia del componente Frame

Aprende a usar el componente Frame para presentar imágenes.