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

Assets

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
/website/docs/myFeature.mdx

# Some assets you want to use
/website/docs/assets/docusaurus-asset-example-banner.png
/website/docs/assets/docusaurus-asset-example.docx

Imagens

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:

<img
src={require('./assets/docusaurus-asset-example-banner.png').default}
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

note

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

Arquivos

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

# My Markdown page

<a
target="_blank"
href={require('./assets/docusaurus-asset-example.docx').default}>
Download this docx
</a>

or

[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';

<ThemedImage
alt="Imagem com tema no Docusaurus"
sources={{
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:

my-doc.md
![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.