Guia: Imagens e Links na Wiki
Esta página demonstra as diferentes formas de incluir imagens e links nas páginas da wiki.
Imagens
Imagem simples (Markdown)
A forma mais básica — basta usar a sintaxe Markdown padrão. Imagens na pasta static/ são servidas a partir da raiz do site:
Resultado:
Imagem da pasta static/img/
As imagens padrão do Docusaurus ficam em static/img/:
Resultado:
Imagem com tamanho personalizado (HTML)
Para controlar largura, borda ou outros estilos, use a tag <img>:
<img src="/exemplo-imagem.jpg" alt="Imagem redimensionada" width="300" />
Resultado:
Imagem centralizada com legenda
<div align="center">
<img src="/exemplo-imagem.jpg" alt="Imagem com legenda" width="400" />
<p><em>Legenda descritiva da imagem</em></p>
</div>
Resultado:
Legenda descritiva da imagem
Imagem com estilo customizado
<img
src="/exemplo-imagem.jpg"
alt="Imagem estilizada"
style={{borderRadius: '8px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)'}}
width="350"
/>
Resultado:
Galeria de imagens (lado a lado)
<div style={{display: 'flex', gap: '16px', flexWrap: 'wrap'}}>
<img src="/img/undraw_docusaurus_mountain.svg" alt="Mountain" width="200" />
<img src="/img/undraw_docusaurus_tree.svg" alt="Tree" width="200" />
<img src="/img/undraw_docusaurus_react.svg" alt="React" width="200" />
</div>
Resultado:
Links
Link para outra página da wiki
Use caminhos relativos para linkar entre documentos:
[Ir para a Introdução](./intro)
Resultado: Ir para a Introdução
Link para uma página em subpasta
[Criar uma página](./tutorial-basics/create-a-page)
Resultado: Criar uma página
Link externo
[Site do Docusaurus](https://docusaurus.io)
Resultado: Site do Docusaurus
Link com imagem (imagem clicável)
[](https://docusaurus.io)
Resultado:
Onde colocar os arquivos
| Tipo | Caminho | Como referenciar |
|---|---|---|
| Imagens gerais | static/img/ | /img/nome-da-imagem.png |
| Imagens na raiz | static/ | /nome-da-imagem.jpg |
| Outras páginas | docs/ | ./nome-da-pagina (caminho relativo) |
Dica
Prefira usar a pasta static/img/ para organizar suas imagens. Assim o projeto fica mais organizado e fácil de manter.
Formatos suportados
Você pode usar PNG, JPG, SVG, GIF e WebP para imagens.