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.0 KiB
Plaintext
273 lines
8.0 KiB
Plaintext
---
|
|
title: "Imágenes e inserciones"
|
|
description: "Añade imágenes, inserta videos de YouTube e incluye iframes en tus páginas MDX para mejorar la documentación con contenido visual e interactivo."
|
|
keywords: ["imágenes", "videos", "iframes", "medios", "svg"]
|
|
---
|
|
|
|
Agrega imágenes, inserta videos e incluye contenido interactivo con iframes en tu documentación.
|
|
|
|
<Frame>
|
|
<img className="rounded-xl" src="https://mintlify-assets.b-cdn.net/bigbend.jpg" alt="Fotografía de un paisaje con flores moradas en primer plano, montañas al fondo y un cielo azul con nubes dispersas." />
|
|
</Frame>
|
|
|
|
<div id="images">
|
|
## Imágenes
|
|
</div>
|
|
|
|
Agrega imágenes para aportar contexto visual, ejemplos o elementos decorativos a tu documentación.
|
|
|
|
<div id="basic-image-syntax">
|
|
### Sintaxis básica de imágenes
|
|
</div>
|
|
|
|
Utiliza la [sintaxis de Markdown](https://www.markdownguide.org/basic-syntax/#images) para añadir imágenes a tu documentación:
|
|
|
|
```mdx
|
|
|
|
```
|
|
|
|
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.
|
|
|
|
<Tip>
|
|
Incluye siempre texto alternativo descriptivo para mejorar la accesibilidad y el SEO. El texto alternativo debe describir claramente lo que muestra la imagen.
|
|
</Tip>
|
|
|
|
Los archivos de imagen deben pesar menos de 20 MB. Para archivos más grandes, alójalos en un servicio CDN como [Amazon S3](https://aws.amazon.com/s3) o [Cloudinary](https://cloudinary.com).
|
|
|
|
<div id="html-image-embeds">
|
|
### Inserciones de imágenes HTML
|
|
</div>
|
|
|
|
Para tener más control sobre la visualización de las imágenes, utiliza etiquetas HTML `<img>`:
|
|
|
|
```jsx
|
|
<img
|
|
src="/images/dashboard.png"
|
|
alt="Interfaz principal del dashboard"
|
|
style={{height: "300px", width: "400px"}}
|
|
className="rounded-lg"
|
|
/>
|
|
```
|
|
|
|
<div id="resize-images-with-inline-styles">
|
|
#### Cambiar el tamaño de imágenes con estilos en línea
|
|
</div>
|
|
|
|
Usa estilos en línea de JSX con el atributo `style` para cambiar el tamaño de las imágenes:
|
|
|
|
```jsx
|
|
<img
|
|
src="/images/architecture.png"
|
|
style={{width: "450px", height: "auto"}}
|
|
alt="Diagrama que muestra la arquitectura del sistema"
|
|
/>
|
|
```
|
|
|
|
<div id="disable-image-zoom">
|
|
#### Desactivar el zoom de las imágenes
|
|
</div>
|
|
|
|
Para desactivar el zoom predeterminado al hacer clic en las imágenes, agrega la propiedad `noZoom`:
|
|
|
|
```html highlight="4"
|
|
<img
|
|
src="/images/screenshot.png"
|
|
alt="Texto alternativo descriptivo"
|
|
noZoom
|
|
/>
|
|
```
|
|
|
|
|
|
<div id="link-images">
|
|
#### Enlazar imágenes
|
|
</div>
|
|
|
|
Para convertir una imagen en un enlace clicable, envuelve la imagen en una etiqueta de enlace y agrega la propiedad `noZoom`:
|
|
|
|
```html
|
|
<a href="https://mintlify.com" target="_blank">
|
|
<img
|
|
src="/images/logo.png"
|
|
alt="Logotipo de Mintlify"
|
|
noZoom
|
|
/>
|
|
</a>
|
|
```
|
|
|
|
<Note>
|
|
Las imágenes dentro de etiquetas de enlace muestran automáticamente un cursor de puntero para indicar que se pueden hacer clic.
|
|
</Note>
|
|
|
|
<div id="copy-and-download-actions">
|
|
#### Acciones de copiar y descargar
|
|
</div>
|
|
|
|
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:
|
|
|
|
```html
|
|
<img
|
|
src="/images/diagram.png"
|
|
alt="Diagrama de arquitectura del sistema"
|
|
actions
|
|
/>
|
|
```
|
|
|
|
```html
|
|
<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`.
|
|
|
|
```html
|
|
<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`.
|
|
|
|
<div id="light-and-dark-mode-images">
|
|
#### Imágenes para los modos claro y oscuro
|
|
</div>
|
|
|
|
Para mostrar imágenes distintas en los temas claro y oscuro, usa clases de Tailwind CSS:
|
|
|
|
```html
|
|
<!-- 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"
|
|
/>
|
|
```
|
|
|
|
<div id="svg-images">
|
|
### Imágenes SVG
|
|
</div>
|
|
|
|
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](https://www.drawio.com) 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](https://www.drawio.com/doc/faq/svg-export-text-problems) para obtener más información sobre las exportaciones de SVG.
|
|
|
|
<div id="videos">
|
|
## Videos
|
|
</div>
|
|
|
|
Mintlify admite [etiquetas HTML en Markdown](https://www.markdownguide.org/basic-syntax/#html), lo que te brinda flexibilidad para crear contenido enriquecido.
|
|
|
|
<Tip>
|
|
Incluye siempre texto alternativo dentro de los elementos de video para los navegadores que no admiten la reproducción de video.
|
|
</Tip>
|
|
|
|
<div id="youtube-embeds">
|
|
### Videos de YouTube incrustados
|
|
</div>
|
|
|
|
Incrusta videos de YouTube mediante elementos iframe:
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
<Frame>
|
|
<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 />
|
|
</Frame>
|
|
|
|
|
|
<div id="self-hosted-videos">
|
|
### Videos autoalojados
|
|
</div>
|
|
|
|
Usa el elemento HTML `<video>` para contenido de video autoalojado:
|
|
|
|
```html
|
|
<video
|
|
controls
|
|
className="w-full aspect-video rounded-xl"
|
|
src="enlace-a-tu-video.com"
|
|
></video>
|
|
```
|
|
|
|
<div id="autoplay-videos">
|
|
### Reproducción automática de vídeos
|
|
</div>
|
|
|
|
Para reproducir un vídeo automáticamente, usa:
|
|
|
|
```html
|
|
<video
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
className="w-full aspect-video rounded-xl"
|
|
src="/videos/demo.mp4"
|
|
></video>
|
|
```
|
|
|
|
<Note>
|
|
Al usar la sintaxis de JSX, escribe los atributos de dos palabras en camelCase: `autoPlay`, `playsInline`, `allowFullScreen`.
|
|
</Note>
|
|
|
|
<div id="iframes">
|
|
## Iframes
|
|
</div>
|
|
|
|
Incorpora contenido externo con elementos iframe:
|
|
|
|
```html
|
|
<iframe
|
|
src="https://example.com/embed"
|
|
title="Contenido integrado"
|
|
className="w-full h-96 rounded-xl"
|
|
></iframe>
|
|
```
|
|
|
|
<Tip>
|
|
Envuelve los iframes en un componente [frame](/es/components/frames) para mantenerlos dentro del ancho de la columna de texto y evitar desbordamientos.
|
|
|
|
```html
|
|
<Frame>
|
|
<iframe
|
|
src="https://example.com/embed"
|
|
title="Contenido integrado"
|
|
className="w-full h-96 rounded-xl"
|
|
></iframe>
|
|
</Frame>
|
|
```
|
|
</Tip>
|
|
|
|
<div id="related-resources">
|
|
## Recursos relacionados
|
|
</div>
|
|
|
|
<Card title="Referencia del componente Frame" icon="frame" horizontal href="/es/components/frames">
|
|
Aprende a usar el componente Frame para presentar imágenes.
|
|
</Card> |