DotMDComo adicionar uma imagem em Markdown:ponto de exclamação, texto alternativo, caminho.
A imagem em Markdown é uma linha curta. Tamanho, alinhamento e legendas não fazem parte dela, por isso precisam de um pouco de HTML. Eis a sintaxe, as regras dos caminhos e as soluções.
macOS 14 ou posterior. Ler é grátis; editar e rever são um pagamento único.
Resposta rápida
Uma imagem é uma ligação com um ponto de exclamação à frente: . O caminho pode ser um endereço web ou um ficheiro relativo ao documento. Para definir um tamanho, passe ao HTML: <img src="image.png" width="400">.
<img src="assets/cat.png" alt="A cat on a keyboard" width="400">·
A sintaxe
- O texto alternativo entre parênteses retos descreve a imagem aos leitores de ecrã e aparece se a imagem não carregar. Escreva o que a imagem mostra, e não "imagem".
- O caminho vai entre parênteses. Se tiver espaços, escreva-os como
%20ou envolva o caminho em parênteses angulares. - O título é um texto opcional entre aspas, normalmente mostrado como dica ao passar o cursor.
O estilo por referência também funciona e mantém os endereços longos fora do texto:
![Logo][logo]
[logo]: https://example.com/logo.png "DotMD logo"Caminhos relativos e onde está o ficheiro
Um caminho sem esquema é relativo ao ficheiro Markdown, e não ao sítio onde abriu a aplicação. Com os ficheiros organizados assim
docs/
spec.md
assets/
flow.pnga imagem em spec.md é . A partir de um ficheiro uma pasta acima, escreva docs/assets/flow.png, e a partir de uma pasta abaixo, ../assets/flow.png. No GitHub, um caminho que começa por / é relativo à raiz do repositório. Mantenha as imagens junto do documento, numa pasta assets, para que mover a pasta mova também as imagens.
Os nomes dos ficheiros de imagem distinguem maiúsculas de minúsculas nos servidores Linux, mesmo que um Mac as ignore, o que é uma razão comum para uma imagem funcionar localmente e falhar online.
Como definir o tamanho da imagem
O Markdown não tem tamanho. Use uma etiqueta HTML img com uma largura; a altura acompanha as proporções:
<img src="assets/screen.png" alt="Settings window" width="400">A largura e a altura são em píxeis, e uma percentagem como width="50%" funciona na maioria das aplicações. O GitHub suporta esta etiqueta em README e comentários. Algumas aplicações também aceitam um tamanho dentro do texto alternativo, como . Essa forma vem do Obsidian e o DotMD lê-a, mas outras aplicações mostrarão |400 como parte do texto alternativo, por isso use a etiqueta HTML num ficheiro que tem de funcionar em todo o lado. Numa célula de tabela, a barra vertical escreve-se \|.
Alinhamento e legendas
O alinhamento e as legendas também são HTML. Para centrar uma imagem, ponha-a num parágrafo com align:
<p align="center">
<img src="assets/logo.png" alt="Logo" width="200">
</p>Para uma legenda, use um figure com um figcaption:
<figure>
<img src="assets/flow.png" alt="Request flow" width="500">
<figcaption>Figure 1. The request flow.</figcaption>
</figure>Nem todas as aplicações mantêm estas etiquetas; o GitHub mantém a maioria, e o DotMD mostra ambas. Se precisar de uma legenda que funcione em qualquer lado, ponha antes uma linha em itálico debaixo da imagem: *Figura 1. O fluxo do pedido.*.
Uma imagem clicável e outros truques
Ponha a imagem dentro de uma ligação para a tornar clicável:
[](https://example.com/builds)É assim que se fazem os emblemas no topo de um README. Para mostrar uma imagem diferente no modo escuro, use um elemento picture com um <source media="(prefers-color-scheme: dark)">, onde a aplicação o suporte.
Texto alternativo, tamanho do ficheiro e formatos
Escreva o texto alternativo como se descrevesse a imagem ao telefone: Janela de definições com a opção Sync ativada diz mais do que captura de ecrã. Para uma imagem puramente decorativa, deixe os parênteses vazios para que o leitor de ecrã a ignore.
Use PNG para capturas de ecrã e diagramas, JPEG para fotografias, SVG para logótipos e desenhos de linhas, e mantenha os ficheiros pequenos: uma captura de 6 MB atrasa um README e um repositório. A maioria das aplicações também mostra GIF animados como qualquer outra imagem.
Porque é que a imagem não aparece
- O caminho está errado. Verifique-o a partir da pasta do ficheiro Markdown e verifique as maiúsculas e minúsculas do nome do ficheiro.
- Falta o ponto de exclamação. Sem ele obtém uma ligação, e não uma imagem.
- Um espaço no caminho sem escape.
- Um ficheiro local numa página online. Um caminho para um ficheiro do seu disco só funciona no seu disco.
- Uma imagem remota bloqueada. Algumas aplicações não carregam imagens da web enquanto não o permitir.
Para ver como uma imagem vai ficar, abra o ficheiro num leitor que resolva os caminhos relativos ao documento. O DotMD fá-lo: as imagens não passam da largura da coluna de texto, a etiqueta HTML de largura é respeitada e uma captura de ecrã colada no editor é guardada numa pasta assets junto do ficheiro. A leitura é gratuita.
Perguntas sobre imagens em Markdown
Como adiciono uma imagem em Markdown?
Escreva . O caminho é um endereço web ou um caminho de ficheiro relativo ao ficheiro Markdown.
Como mudo o tamanho de uma imagem em Markdown?
O Markdown não tem sintaxe de tamanho. Use uma etiqueta HTML como <img src="image.png" width="400">.
Como centro uma imagem ou junto uma legenda em Markdown?
Use HTML: envolva a imagem em <p align="center"> para a centrar, ou em <figure> com um <figcaption> para uma legenda. O suporte varia consoante a aplicação.
Porque é que a minha imagem em Markdown não aparece?
Normalmente o caminho relativo está errado ou as maiúsculas e minúsculas não coincidem com o nome do ficheiro. Verifique se há um ponto de exclamação e se o caminho é relativo ao ficheiro Markdown.