Ir para o conteúdo principal
Version: 2.0.0-beta.10 🚧


Sometimes you want to link to assets (e.g. docx files, images...) directly from Markdown files, and it is convenient to co-locate the asset next to the Markdown file using it.

Vamos imaginar a seguinte estrutura de arquivo:

# Your doc

# Some assets you want to use


Você pode exibir imagens de três maneiras diferentes: sintaxe Markdown, JSX require ou sintaxe ES imports.

Exibir imagens usando sintaxe simples Markdown:

![Banner de exemplo](./assets/docusaurus-asset-example-banner.png)

Exibe imagens usando inline CommonJS require na tag JSX:

alt="Example banner"

Exibir imagens usando ES import sintaxe e tag JSX:

import myImageUrl from './assets/docusaurus-asset-example-banner.png';

<img src={myImageUrl} alt="Example banner" />

Isto resulta na exibição da imagem:

Meu texto alternativo da imagem


Se você estiver usando @docusaurus/plugin-ideal-image, você precisa usar o componente de imagem dedicado, conforme documentado.


Da mesma forma, você pode vincular os assets existentes exigindo eles e usando a URL retornada nos vídeos, links, etc.

# My Markdown page

Download this docx


[Download this docx using Markdown](./assets/docusaurus-asset-example.docx)
Download this docx

Download this docx using Markdown

SVGs inline

O Docusaurus suporta SVGs inline.

import DocusaurusSvg from './docusaurus.svg';

<DocusaurusSvg />;

Isto pode ser útil se você quiser alterar a parte da imagem SVG via CSS. Por exemplo, você pode alterar uma das cores de SVG com base no tema atual.

import DocusaurusSvg from './docusaurus.svg';

<DocusaurusSvg className="themedDocusaurus" />;
html[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] {
fill: greenyellow;

html[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] {
fill: seagreen;

Imagens com tema

Docusaurus supports themed images: the ThemedImage component (included in the themes) allows you to switch the image source based on the current theme.

import ThemedImage from '@theme/ThemedImage';

alt="Imagem com tema no Docusaurus"
light: useBaseUrl('/img/docusaurus_light.svg'),
dark: useBaseUrl('/img/docusaurus_dark.svg'),
Imagem com tema no DocusaurusImagem com tema no Docusaurus

Static assets

If a Markdown link or image has an absolute path, the path will be seen as a file path and will be resolved from the static directories. For example, if you have configured static directories to be ['public', 'static'], then for the following image:
![An image from the static](/img/docusaurus.png)

Docusaurus will try to look for it in both static/img/docusaurus.png and public/img/docusaurus.png. The link will then be converted to a require call instead of staying as a URL. This is desirable in two regards:

  1. You don't have to worry about base URL, which Docusaurus will take care of when serving the asset;
  2. The image enters Webpack's build pipeline and its name will be appended by a hash, which enables browsers to aggressively cache the image and improves your site's performance.