Saltar al contenido principal
Agrega imágenes, inserta videos e incluye contenido interactivo con iframes en tu documentación.
Fotografía de un paisaje con flores moradas en primer plano, montañas al fondo y un cielo azul con nubes dispersas.

​
Imágenes

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

​
Sintaxis básica de imágenes

Utiliza la sintaxis de Markdown para añadir imágenes a tu documentación:
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.
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 HTML

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

​
Cambiar el tamaño de las imágenes

Usa clases de Tailwind CSS para cambiar el tamaño de las imágenes. Cuando ninguna clase utilitaria cubra el tamaño que necesitas, usa un valor arbitrario como w-[450px]:
Evita la propiedad style para definir el tamaño. Puede provocar un cambio en el diseño al cargar la página.

​
Desactivar el zoom de las imágenes

Para desactivar el zoom predeterminado al hacer clic en las imágenes, agrega la propiedad noZoom:
Para convertir una imagen en un enlace clicable, envuelve la imagen en una etiqueta de enlace y agrega la propiedad noZoom:
Las imágenes dentro de etiquetas de enlace muestran automáticamente un cursor de puntero para indicar que se pueden hacer clic.

​
Acciones de copiar y descargar

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:
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.
Valores admitidos para actionsPlacement: bottom-center, bottom-left, bottom-right, top-center, top-left, top-right.

​
Imágenes para los modos claro y oscuro

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

​
Optimización automática de imágenes

Mintlify optimiza las imágenes almacenadas en tu repositorio de documentación cuando las sirve. No necesitas convertir formatos, generar varios tamaños ni definir dimensiones por tu cuenta. La optimización se aplica a las imágenes que referencias con una ruta relativa a la raíz, como /images/screenshot.png. Esto incluye imágenes de Markdown, etiquetas <img>, propiedades de imagen e icono en componentes, y el logotipo, el fondo y el favicon de tu docs.json. Para cada imagen optimizada, Mintlify:
  • Sirve AVIF o WebP a los navegadores que los admiten y el formato original a los navegadores que no.
  • Comprime la imagen y elimina los metadatos, como los datos EXIF.
  • Genera versiones redimensionadas de hasta 2500px de ancho para que los navegadores descarguen la versión más pequeña que se ajuste al diseño de la página. Las imágenes nunca se amplían por encima de su tamaño original.
  • Añade el ancho y el alto originales a la imagen para que la página no se desplace mientras se cargan las imágenes. Si defines width o height en una etiqueta <img>, Mintlify usa tus valores en su lugar.
Mintlify sirve estas imágenes tal como están en tu repositorio, sin optimización:
  • GIFs, para que las animaciones sigan funcionando.
  • Archivos SVG e ICO.
  • Imágenes referenciadas con una URL absoluta, como imágenes alojadas en una CDN externa.
  • Imágenes en páginas que requieren autenticación.
Comprime los GIFs y las imágenes alojadas externamente antes de agregarlos a tu documentación. Cuando actualizas un archivo de imagen en tu repositorio, Mintlify sirve la nueva versión en una nueva URL, por lo que los lectores no ven una copia en caché de la imagen anterior.

​
Imágenes SVG

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.

​
Videos

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

​
Videos de YouTube incrustados

Incrusta videos de YouTube mediante elementos iframe:

​
Videos autoalojados

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

​
Reproducción automática de vídeos

Para reproducir un vídeo automáticamente, usa:
Al usar la sintaxis de JSX, escribe los atributos de dos palabras en camelCase: autoPlay, playsInline, allowFullScreen.

​
Iframes

Incorpora contenido externo con elementos iframe:
Envuelve los iframes en un componente frame para mantenerlos dentro del ancho de la columna de texto y evitar desbordamientos.

Referencia del componente Frame

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