Saltar al contenido principal

🌅 Imágenes

Mostrar imágenes usando Markdown​

Para mostrar esta imagen:

Algún texto alternativo

Simplemente usa el código habitual de Markdown:

![Algún texto alternativo](/img/docu.svg)

Mostrar imágenes usando JSX​

Si deseas un control más detallado sobre cómo se presenta la imagen (cambiar el tamaño, por ejemplo), usa este fragmento de JSX:

import useBaseUrl from '@docusaurus/useBaseUrl';

<img
        alt="Usando JSX para cambiar el tamaño de la imagen"
        src={useBaseUrl('/img/docu.svg')}
        width="500"
/>
Usando JSX para cambiar el tamaño de la imagen

Mostrar imágenes usando JSX, manera recomendada​

Podemos simplemente importar la imagen o recurso deseado y crear una variable que usaremos para mostrar la imagen. Funciona bien con imágenes (png, gif, jpg) pero no con archivos svg.

import SampleImage from '@site/static/img/logo.png';

<img
        alt="Usando JSX para cambiar el tamaño de la imagen"
        src={SampleImage}
        width="100"
/>
Usando JSX para cambiar el tamaño de la imagen

Capturas de pantalla​

Si necesitas agregar capturas de pantalla, puedes usar el componente Screenshot, que envolverá la imagen en un marco de navegador.

Captura de pantalla de la documentación

Aquí está la sintaxis para el componente Screenshot:

<Screenshot src="img/path_to_image.png" url="<mostrado en la barra de direcciones" alt="Texto alternativo para la imagen" />