Imágenes e inserciones

Agrega imágenes, inserta videos e incluye contenido interactivo con iframes en tu documentación.

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

Utiliza la sintaxis de Markdown para añadir imágenes a tu documentación:

![Texto alternativo que describe la imagen](/images/screenshot.png)

Las rutas de las imágenes son relativas a la raíz de tu repositorio de documentación. Por ejemplo, si tu imagen está en images/screenshot.png en tu repositorio, la ruta es /images/screenshot.png. Las rutas relativas (por ejemplo, ./screenshot.png) no son compatibles.

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.

Para tener más control sobre la visualización de las imágenes, utiliza etiquetas HTML <img>:

<img 
  src="/images/dashboard.png" 
  alt="Interfaz principal del dashboard"
  style={{height: "300px", width: "400px"}}
  className="rounded-lg"
/>

Usa estilos en línea de JSX con el atributo style para cambiar el tamaño de las imágenes:

<img
  src="/images/architecture.png"
  style={{width: "450px", height: "auto"}}
  alt="Diagrama que muestra la arquitectura del sistema"
/>

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

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

Agrega controles de copiar y descargar a una imagen con la propiedad actions. Cuando se activan, aparecen botones superpuestos al pasar el cursor, al enfocar o al tocar, para que los lectores puedan copiar la imagen al portapapeles o guardarla en su dispositivo.

Asigna true a actions para mostrar ambos botones, o pasa una lista separada por comas para habilitar acciones específicas:

<img
  src="/images/diagram.png"
  alt="Diagrama de arquitectura del sistema"
  actions
/>

<img
  src="/images/diagram.png"
  alt="Diagrama de arquitectura del sistema"
  actions="copy,download"
/>

Valores admitidos para actions:

• copy: Copia la imagen al portapapeles.
• download: Descarga la imagen como archivo.

Usa la propiedad actionsPlacement para posicionar los botones. El valor predeterminado es bottom-center.

<img
  src="/images/diagram.png"
  alt="Diagrama de arquitectura del sistema"
  actions="download"
  actionsPlacement="top-right"
/>

Valores admitidos para actionsPlacement: bottom-center, bottom-left, bottom-right, top-center, top-left, top-right.

Para mostrar imágenes distintas en los temas claro y oscuro, usa clases de Tailwind CSS:

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

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

Los archivos SVG que usan elementos foreignObject se renderizan de forma diferente en producción que en el entorno de desarrollo local. La CDN de imágenes de Mintlify elimina foreignObject de los SVG como medida de seguridad, lo que puede truncar u ocultar texto y otros contenidos HTML incrustados.

Esto suele afectar a los SVG exportados desde herramientas como draw.io que tienen el formato de texto HTML o el ajuste de línea activados. Para solucionarlo, desactiva Formatted Text y Word Wrap en todas las etiquetas de tu diagrama antes de exportarlo como SVG. Consulta la documentación de draw.io para obtener más información sobre las exportaciones de SVG.

Mintlify admite etiquetas HTML en Markdown, lo que te brinda flexibilidad para crear contenido enriquecido.

Incrusta videos de YouTube mediante elementos iframe:

<iframe
  className="w-full aspect-video rounded-xl"
  src="https://www.youtube.com/embed/4KzFe50RQkQ"
  title="Reproductor de vídeo de YouTube"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

Usa el elemento HTML <video> para contenido de video autoalojado:

<video
  controls
  className="w-full aspect-video rounded-xl"
  src="enlace-a-tu-video.com"
></video>

Para reproducir un vídeo automáticamente, usa:

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

Incorpora contenido externo con elementos iframe:

<iframe 
  src="https://example.com/embed" 
  title="Contenido integrado"
  className="w-full h-96 rounded-xl"
></iframe>

<Frame>
  <iframe 
    src="https://example.com/embed" 
    title="Contenido integrado"
    className="w-full h-96 rounded-xl"
  ></iframe>
</Frame>