É possível colocar uma captura de tela no arquivo README em um repositório GitHub? Qual é a sintaxe?

Se você usar o Markdown (README.md):

Desde que você tenha a imagem em seu repositório, você pode usar um URL relativo:

![Alt text](/relative/path/to/img.jpg?raw=true "Optional Title")

Se você precisar incorporar uma imagem hospedada em outro lugar, poderá usar um URL completo

![Alt text](http://full/path/to/img.jpg "Optional title")

O GitHub recomenda que você use links relativos com o ?raw=trueparâmetro para garantir que os repositórios bifurcados aponte corretamente.

O raw=trueparâmetro está lá para garantir que a imagem à qual você vincula seja renderizada como está. Isso significa que apenas a imagem será vinculada, não toda a interface do GitHub para o respectivo arquivo. Veja este comentário para mais detalhes.

Confira um exemplo: https://raw.github.com/altercation/solarized/master/README.md

Se você usar SVGs então você precisa para definir o atributo sanitize para trueassim: ?raw=true&sanitize=true. (Obrigado @EliSherer)

Além disso, a documentação sobre links relativos nos arquivos README: https://help.github.com/articles/relative-links-in-readmes

E, claro, os documentos de remarcação: http://daringfireball.net/projects/markdown/syntax

Além disso, se você criar uma nova ramificação screenshotspara armazenar as imagens, poderá evitar que elas estejam na masterárvore de trabalho

Você pode incorporá-los usando:

![Alt text](/../<branch name>/path/to/image.png?raw=true "Optional Title")

Embora já exista uma resposta aceita, gostaria de adicionar outra maneira de fazer upload de imagens para leia-me no GitHub.

• Você precisa criar um problema no seu repositório
• Arraste e solte na área de comentários sua imagem
• Após o link da imagem ser gerado, insira-o no seu leia-me

Mais detalhes você pode encontrar aqui

Descobri que o caminho para a imagem no meu repositório não era suficiente, eu tinha que vincular à imagem no raw.github.comsubdomínio.

Formato de URL https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH}

Exemplo de remarcação ![Settings Window](https://raw.github.com/ryanmaxwell/iArrived/master/Screenshots/Settings.png)

1. Carregue sua imagem para postimage.org
2. Obter URL do Markdown do github
3. Inserir no seu ReadMe

Uma linha abaixo deve ser o que você procura

se o seu arquivo estiver no repositório

![ScreenShot](https://raw.github.com/{username}/{repository}/{branch}/{path})

se o seu arquivo estiver em outro URL externo

![ScreenShot](https://{url})

A sintaxe de remarcação para exibir imagens é de fato:

![image](https://{url})

MAS: Como fornecer o url?

• Você provavelmente não deseja confundir seu repositório com capturas de tela, elas não têm nada a ver com código
• você pode não querer lidar com o incômodo de disponibilizar sua imagem na web ... (faça o upload para um servidor ...).

Então ... você pode usar esse truque incrível para fazer o github hospedar seu arquivo de imagem. TDLR:

1. crie um problema na lista de problemas do seu repositório
2. arraste e solte sua captura de tela sobre esse problema
3. copie o código de remarcação que o github acabou de criar para você exibir sua imagem
4. cole-o no seu leia-me (ou onde quiser)

http://solutionoptimist.com/2013/12/28/awesome-github-tricks/

Muito mais simples do que adicionar URL Apenas envie uma imagem para o mesmo repositório, como:

![Screenshot](screenshot.png)

adicione isso ao README

<div align="center">
    <img src="/screenshots/screen1.jpg" width="400px"</img> 
</div>

Remarcação: ![Screenshot](http://url/to/img.png)

• Crie um problema ao adicionar imagens
• Adicione a imagem arrastando e soltando ou pelo seletor de arquivos

• Em seguida, copie a fonte da imagem

• Agora adicione ![Screenshot](http://url/to/img.png)ao seu arquivo README.md

Feito!

Como alternativa, você pode usar algum site de hospedagem de imagens, como imguro URL, e adicioná-lo ao seu arquivo README.md, ou você também pode usar alguma hospedagem de arquivo estática.

Problema de amostra

Método 1-> maneira Markdown

![Alt Text](https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH})

Método 2-> maneira HTML

<img src="https://link(format same as above)" width="100" height="100"/>

ou

<img src="https://link" style=" width:100px ; height:100px " />

Nota -> Se você não deseja estilizar sua imagem, ou seja, redimensionar, remova a parte do estilo

Primeiro, crie um diretório (pasta) na raiz do seu repositório local que conterá o que screenshotsvocê deseja adicionar. Vamos chamar o nome desse diretório screenshots. Coloque as imagens (JPEG, PNG, GIF, `etc) que você deseja adicionar neste diretório.

Captura de tela da área de trabalho do Android Studio

Em segundo lugar, você precisa adicionar um link para cada imagem no seu README. Portanto, se eu tiver imagens nomeadas 1_ArtistsActivity.pnge 2_AlbumsActivity.pngno meu diretório de capturas de tela, adicionarei os links assim:

 <img src="screenshots/1_ArtistsActivity.png" height="400" alt="Screenshot"/> <img src=“screenshots/2_AlbumsActivity.png" height="400" alt="Screenshot"/>

Se você quiser cada captura de tela em uma linha separada, escreva seus links em linhas separadas. No entanto, é melhor se você escrever todos os links em uma linha, separados apenas por espaço. Pode até não parecer muito bom, mas ao fazê-lo, o GitHub os organiza automaticamente para você.

Por fim, confirme suas alterações e pressione-o!

Pesquisei no Google algumas perguntas semelhantes e não encontrei respostas para o meu problema e sua solução bastante simples / fácil.

Google Cloud Storage - uma abordagem ligeiramente diferente para imagens em READMEs

Aqui está: como o OP, eu queria uma imagem no meu README do Github e, conhecendo a sintaxe do Markdown para isso, digitei:

![My Image](https://storage.cloud.google.com/${MY_BUCKET}/${MY_IMAGE}

Você precisa concluir as substituições reais acima (por exemplo, MY_IMAGE = image.jpg) para que isso funcione.

Mas espere ... falha - não há foto renderizada real! E o link é exatamente o fornecido pelo Google Storage!

Github camo- Imagens Anônimas

O Github hospeda suas imagens anonimamente , yay! No entanto, isso apresenta um problema para os ativos de armazenamento do Google. Você precisa obter o URL gerado no seu Google Cloud Console.

Tenho certeza de que há uma maneira mais suave, no entanto, basta visitar o terminal de URL especificado e copiar o URL longo. Detalhes:

Instruções

1. Visite seu console de armazenamento: https://console.cloud.google.com/storage/browser/ $ {MY_BUCKET}? Project = $ {MY_PROJECT}
2. Clique na imagem que você deseja exibir no Github (isso abre a página "Detalhes do objeto")
3. Copie a pasta que URL (a que começa com httpsnão gs) em uma nova guia / janela do navegador
4. Copie a massa do novo URL gerado - deve ser mais longo - da nova guia / janela do navegador para o arquivo LEIA-ME Github

Esperemos que isso ajude a acelerar e esclarecer esse problema para qualquer outra pessoa.

Para mim, o melhor caminho é -

1. Crie um novo problema com esse repositório no github e faça o upload do arquivo no formato gif. Para converter arquivos de vídeo em formato gif, você pode usar este site http://www.online-convert.com/
2. Envie o problema recém-criado.
3. Copie o endereço do arquivo carregado
4. Finalmente, no seu arquivo LEIA-ME, coloque! [Demo] (ENDEREÇO ​​COPIADO)

Espero que isso ajude.

Adicionar imagem no repositório a partir da opção de upload de arquivo e depois no arquivo README

![Alt text]("enter image url of repositoryhere") 

Com as imagens localizadas no /screen-shotsdiretório O exterior <div>permite que as imagens sejam posicionadas. O preenchimento é obtido usando <img width="desired-padding" height="0">.

<div align="center">
        <img width="45%" src="screen-shots/about.PNG" alt="About screen" title="About screen"</img>
        <img height="0" width="8px">
        <img width="45%" src="screen-shots/list.PNG" alt="List screen" title="List screen"></img>
</div>