Recentemente, entrei no GitHub . Eu hospedei alguns projetos lá.

Preciso incluir algumas imagens no meu arquivo LEIA-ME. Eu não sei como fazer isso.

Eu procurei sobre isso, mas tudo o que consegui foram alguns links que me dizem para "hospedar imagens na web e especificar o caminho da imagem no arquivo README.md".

Existe alguma maneira de fazer isso sem hospedar as imagens em quaisquer serviços de hospedagem na web de terceiros?

Experimente esta remarcação:

![alt text](http://url/to/img.png)

Eu acho que você pode vincular diretamente à versão bruta de uma imagem se ela estiver armazenada no seu repositório. ie

![alt text](https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true)

Você também pode usar caminhos relativos como

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

• Você pode criar um novo problema
• carregar (arrastar e soltar) imagens nele
• Copie o URL das imagens e cole-o no seu arquivo README.md.

aqui está um vídeo detalhado do youTube explicado isso em detalhes:

https://www.youtube.com/watch?v=nvPOUdz5PL4

É muito mais simples que isso.

Basta fazer o upload da sua imagem para a raiz do repositório e vincular ao nome do arquivo sem nenhum caminho, como:

![Screenshot](screenshot.png)

Você também pode adicionar imagens com tags HTML simples :

<p align="center">
  <img src="your_relative_path_here" width="350" title="hover text">
  <img src="your_relative_path_here_number_2_large_name" width="350" alt="accessibility text">
</p>

Muitas das soluções publicadas são incompletas ou não são do meu gosto.

• Uma CDN externa como imgur adiciona outra ferramenta à cadeia. Meh.
• Criar um problema fictício no rastreador de problemas é um truque. Isso cria confusão e confunde os usuários. É difícil migrar esta solução para um fork ou para o GitHub.
• O uso da ramificação gh-pages torna os URLs quebradiços. Outra pessoa que trabalha no projeto que mantém a página gh pode não saber que algo externo depende do caminho para essas imagens. A ramificação gh-pages possui um comportamento específico no GitHub, que não é necessário para hospedar imagens CDN.
• O rastreamento de ativos no controle de versão é uma coisa boa. À medida que um projeto cresce e muda, é uma maneira mais sustentável de gerenciar e acompanhar as alterações de vários usuários.
• Se uma imagem se aplicar a uma revisão específica do software, pode ser preferível vincular uma imagem imutável. Dessa forma, se a imagem for atualizada posteriormente para refletir as alterações no software, quem ler o leia-me dessa revisão encontrará a imagem correta.

Minha solução preferida, inspirada nessa essência , é usar um ramo de ativos com links permanentes para revisões específicas .

git checkout --orphan assets
git reset --hard
cp /path/to/cat.png .
git add .
git commit -m 'Added cat picture'
git push -u origin assets
git rev-parse HEAD  # Print the SHA, which is optional, you'll see below.

Construa um "link permanente" para esta revisão da imagem e envolva-o no Markdown.

No entanto, procurar o SHA de confirmação manualmente é inconveniente, portanto, como um atalho, pressione Y para um link permanente para um arquivo em um commit específico, como diz a página help.github.

Para mostrar sempre a imagem mais recente na ramificação de ativos, use o URL do blob:

https://github.com/github/{repository}/blob/assets/cat.png 

(Na mesma página de ajuda do GitHub, as visualizações de arquivo mostram a versão mais recente em uma ramificação )

Comprometer sua imagem ( image.png ) em uma pasta ( myFolder ) e adicione a seguinte linha no seu README.md :

![Optional Text](../master/myFolder/image.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 ![alt tag](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

Preciso incluir algumas imagens no meu arquivo LEIA-ME. Eu não sei como fazer isso.

Criei um pequeno assistente que permite criar e personalizar galerias de imagens simples para o leia-me do seu repositório GitHub: Consulte ReadmeGalleryCreatorForGitHub .

O assistente aproveita o fato de o GitHub permitir a ocorrência de tags img no README.md. Além disso, o assistente usa o truque popular de carregar imagens no GitHub arrastando-as e soltando-as na área de problema (como já mencionado em uma das respostas neste tópico).

Basta adicionar uma <img>tag ao seu README.md com o src relativo ao seu repositório. Se você não estiver usando o src relativo, verifique se o servidor suporta o CORS.

Funciona porque o GitHub suporta inline-html

<img src="/docs/logo.png" alt="My cool logo"/>
# My cool project and above is the logo of it

Observe aqui

Sintaxe básica

![myimage-alt-tag](url-to-image)

Aqui:

1. my-image-alt-tag: texto que será exibido se a imagem não for exibida.
2. URL para imagem: qualquer que seja o seu recurso de imagem. URI da imagem

Exemplo:

![stack Overflow](http://lmsotfy.com/so.png)

Será parecido com o seguinte:

Use tabelas para se destacar, ele dará charme separado a ela

A sintaxe da tabela é:

Separe cada célula da coluna por símbolo |

e cabeçalho da tabela (Primeira linha) pela 2ª linha por ---

| col 1 | col 2 |
| ------------ | ------------- |
| imagem 1 | imagem 2 |

resultado

Agora basta colocar <img src="url/relativePath">na imagem 1 e na imagem 2 se você estiver usando duas imagens

Nota: se o uso de várias imagens incluir apenas mais colunas, você poderá usar o atributo width e height para torná-lo legível.

Exemplo

| col 1 | col 2 |
| ------------ | ------------- |
| <img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_582,c_limit/so-logo-s.jpg" width="250"> | <img src="https://mk0jobadderjftub56m0.kinstacdn.com/wp-content/uploads/stackoverflow.com-300.jpg" width="250">|

O espaçamento não importa

Imagem de saída

ajudado por: adam-p

Você pode apenas fazer:

git checkout --orphan assets
cp /where/image/currently/located/on/machine/diagram.png .
git add .
git commit -m 'Added diagram'
git push -u origin assets

Então você pode apenas referenciá-lo no READMEarquivo da seguinte maneira:

![diagram](diagram.png)

No meu caso, eu uso o imgur e uso o link direto dessa maneira.

![img](http://i.imgur.com/yourfilename.png)

Você pode vincular as imagens em seu projeto a partir de README.md (ou externamente) usando o link CDN do github alternativo.

O URL ficará assim:

https://cdn.rawgit.com/<USER>/<REPO>/<BRANCH>/<PATH>/<TO>/<FILE>

Eu tenho uma imagem SVG no meu projeto e, quando a refiro na documentação do projeto Python, ela não é renderizada.

Link do projeto

Aqui está o link do projeto para o arquivo (não é renderizado como imagem):

https://github.com/jongracecox/anybadge/blob/master/examples/awesomeness.svg

Exemplo de imagem incorporada:

Link não processado

Aqui está o link RAW para o arquivo (ainda não é renderizado como imagem):

https://raw.githubusercontent.com/jongracecox/anybadge/master/examples/awesomeness.svg

Exemplo de imagem incorporada:

Link CDN

Usando o link CDN, posso vincular ao arquivo usando (renderiza como uma imagem):

https://cdn.rawgit.com/jongracecox/anybadge/master/examples/awesomeness.svg

Exemplo de imagem incorporada:

É assim que posso usar imagens do meu projeto no meu README.mdarquivo e no meu projeto PyPi, na duplicação reStructredText ( aqui )

Eu resolvi esse problema. Você só precisa se referir ao arquivo leia-me de outra pessoa.

Inicialmente, você deve enviar um arquivo de imagem para a biblioteca de códigos do github! Em seguida, faça referência direta ao endereço do arquivo de imagem.

Normalmente, hospedo a imagem no site, isso pode ser vinculado a qualquer imagem hospedada. Apenas jogue isso no leia-me. Funciona para .rstarquivos, não tenho certeza sobre.md

.. image:: https://url/path/to/image
   :height: 100px
   :width: 200 px
   :scale: 50 %

No meu caso, eu queria mostrar uma tela de impressão, Githubmas também a tela NPM. Embora o uso do caminho relativo estivesse funcionando dentro Github, não estava funcionando fora dele. Basicamente, mesmo que eu empurrei meu projeto NPMtambém (que simplesmente usa o mesmo readme.md, a imagem nunca foi exibida).

Eu tentei algumas maneiras, no final, foi o que funcionou para mim:

![Preview](https://raw.githubusercontent.com/username/project/master/image-path/image.png)

Agora vejo minha imagem corretamente em NPMou em qualquer outro lugar em que pude publicar meu pacote.

Caso você precise enviar algumas fotos para documentação, uma boa abordagem é usar o git-lfs . Supondo que você tenha instalado o git-lfs, siga estas etapas:

1. Inicialize o git lfs para cada tipo de imagem:

   git lfs *.png
   git lfs *.svg
   git lfs *.gif
   git lfs *.jpg
   git lfs *.jpeg
   

2. Crie uma pasta que será usada como local da imagem, por exemplo. doc. Nos sistemas baseados em GNU / Linux e Unix, isso pode ser feito via:

   cd project_folder
   mkdir doc
   git add doc
   

3. Copie e cole todas as imagens na pasta doc. Depois adicione-os via git addcomando.

4. Confirmar e empurrar.

5. As imagens estão disponíveis publicamente no seguinte URL:

   https://media.githubusercontent.com/media/ ^ github_username ^ / ^ repo ^ / ^ branch ^ / ^ image_location no repo ^

Onde: * ^github_username^é o nome de usuário no github (você pode encontrá-lo na página de perfil) * ^repo_name^é o nome do repositório * ^branch^é o ramo do repositório no qual a imagem é carregada * ^image_location in the repo^é o local, incluindo a pasta em que a imagem está armazenada.

Além disso, você pode fazer o upload da imagem primeiro, visitar o local na página do github de projetos e navegar até encontrar a imagem, pressionar o downloadbotão e copiar e colar o URL na barra de endereços do navegador.

Veja isso no meu projeto como referência.

Em seguida, você pode usar o URL para incluí-los usando a sintaxe de remarcação mencionada acima:

![some alternate text that describes the image](^github generated url from git lfs^)

Por exemplo: suponhamos que usamos esta foto. Então você pode usar a sintaxe de remarcação:

![In what order to compile the files](https://media.githubusercontent.com/media/pc-magas/myFirstEnclave/master/doc/SGX%20Compile%20workflow.png)

APENAS ISSO FUNCIONA !!

tome cuidado com o nome do arquivo em maiúsculas na tag, coloque o arquivo PNG inroot e vincule o nome do arquivo sem nenhum caminho:

![Screenshot](screenshot.png)

Estou apenas estendendo ou adicionando um exemplo à resposta já aceita.

Depois de colocar a imagem no seu repositório do Github.

Então:

• Abra o repositório correspondente do Github no seu navegador.
• Navegue para o arquivo de imagem de destino Em seguida, basta abrir a imagem em uma nova guia.
• Copie o URL
• E, finalmente, insira o URL no seguinte padrão ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

No meu caso, é

![In a single picture](https://raw.githubusercontent.com/shadmazumder/Xcode/master/InOnePicture.png)

Onde

• shadmazumder é meu username
• Xcode é o projectname
• master é o branch
• InOnePicture.pngé o image, no meu caso, InOnePicture.pngestá no diretório raiz.

Existem 2 maneiras simples de fazer isso,

1) use a tag HTML img,

2)! [] (O caminho em que sua imagem é salva / image-name.png)

o caminho que você pode copiar do URL no navegador enquanto abre a imagem. pode haver um problema de espaçamento. Verifique se há espaço entre duas palavras do caminho ou no nome da imagem add->% 20. assim como o navegador.

Os dois funcionarão, se você quiser entender mais, acesse o meu github -> https://github.com/adityarawat29

Esta resposta também pode ser encontrada em: https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md

Exiba imagens do repositório usando:

prefixar o domínio: https://raw.githubusercontent.com/

acrescentar sinalizador: ?sanitize=true&raw=true

use <img />tag

• Domínio :raw.githubusercontent.com/
• Nome de usuário :YourUserAccount/
• Repo :YourProject/
• Filial :YourBranch/
• Caminho :DirectoryPath/
• Nome do arquivo :example.png

Funciona para SVG, PNG e JPEG

 - `raw.githubusercontent.com/YourUserAccount/YourProject/YourBranch/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true`

Código de exemplo de trabalho exibido abaixo depois de usado:

**raw.githubusercontent.com**:
<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png?raw=true" />

<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true" />

raw.githubusercontent.com :

Obrigado: - https://stackoverflow.com/a/48723190/1815624 - https://github.com/potherca-blog/StackOverflow/edit/master/question.13808020.include-an-svg-hosted-on-github -in-markdown / readme.md

Eu encontrei outra solução, mas bem diferente e vou explicar

Basicamente, usei a tag para mostrar a imagem, mas queria ir para outra página quando a imagem foi clicada e aqui está como eu a fiz.

<a href="the-url-you-want-to-go-when-image-is-clicked.com" />
<img src="image-source-url-location.com" />

Se você colocá-lo um ao lado do outro, separado por uma nova linha, acho que quando você clica na imagem, ele vai para a tag que tem o href no outro site que você deseja redirecionar.

MAIS RECENTES

Os wikis podem exibir imagens PNG, JPEG ou GIF

Agora você pode usar:

[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]

-OU-

Siga esses passos:

1. No GitHub, navegue até a página principal do repositório.

2. Sob o nome do seu repositório, clique em Wiki.

3. Usando a barra lateral do wiki, navegue até a página que deseja alterar e clique em Editar.

4. Na barra de ferramentas do wiki, clique em Imagem .

5. Na caixa de diálogo "Inserir imagem", digite o URL da imagem e o texto alternativo (usado pelos mecanismos de pesquisa e pelos leitores de tela).
6. Clique OK.

Consulte Docs .

Considere usar a tablese adicionar várias capturas de tela e deseja alinhá-las usando dados tabulares para melhorar a acessibilidade, como mostrado aqui:

Se o seu analisador de markdown o suportar, você também poderá adicionar o role="presentation"atributo WIA-ARIA ao elemento TABLE e omitir as thtags.

Processo passo a passo, primeiro crie uma pasta (nomeie sua pasta) e adicione as imagens / imagens que deseja carregar no arquivo Leiame.md. (você também pode adicionar as imagens em qualquer pasta existente do seu projeto.) Agora, clique no ícone de edição do arquivo Leiame.md e, em seguida,

![](relative url where images is located/refrence_image.png)  // refrence_image is the name of image in my case.

Após adicionar a imagem, você pode visualizar as alterações na guia "Visualizar alterações". Você encontrará sua imagem aqui. por exemplo, assim, no meu caso,

![](app/src/main/res/drawable/refrence_image.png)

pasta app -> pasta src -> pasta principal -> pasta res -> pasta drawable -> e dentro da pasta drawable o arquivo refrence_image.png está localizado. Para adicionar várias imagens, você pode fazer assim,

![](app/src/main/res/drawable/refrence_image1.png)
![](app/src/main/res/drawable/refrence_image2.png)
![](app/src/main/res/drawable/refrence_image3.png)

Nota 1 - Verifique se o nome do arquivo de imagem não contém espaços. Se ele contiver espaços, você precisará adicionar% 20 para cada espaço entre o nome do arquivo. É melhor remover os espaços.

Nota 2 - você pode até redimensionar a imagem usando tags HTML ou existem outras maneiras. você pode pesquisar no Google para mais. se você precisar.

Depois disso, escreva sua mensagem de alteração de confirmação e confirme suas Alterações.

Existem muitos outros truques para fazê-lo, como criar um problema, etc., etc. De longe, esse é o melhor método que eu já deparei.

Podemos fazer isso simplesmente,

• crie um novo problema no GitHub
• arraste e solte imagens no corpo divdo problema

Após alguns segundos, um link será gerado. Agora, copie o link ou o URL da imagem e use-o em qualquer plataforma suportada.

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

![Alt text]("enter repository image URL here") 

Há ainda outra opção que não vi mencionada. Você pode simplesmente criar outro repositório em seu usuário ou organização chamado "ativos". Envie suas imagens para este repositório e faça referência a elas em seus outros repositórios:

![alt text](https://raw.githubusercontent.com/my-org/assets/master/folder/logo.png)

Eu fiz isso em um dos meus repositórios e me convém. Posso versão minhas imagens README para todos os meus projetos independentemente do meu código, mas ainda assim mantê-las em um só lugar . Não são necessários problemas ou ramificações ou outros artefatos extraviados facilmente.