Adicionar imagens a README.md em GitHub

recentemente, juntei-me a GitHub . Eu organizei alguns projectos lá.

Preciso de incluir algumas imagens no meu ficheiro README. Não sei como fazer isso.

eu pesquisei sobre isso, mas tudo o que eu consegui foi alguns links que me dizem para "hospedar imagens na web e especificar o caminho da imagem em README.md file".

Há alguma maneira de fazer isto sem hospedar as imagens em qualquer serviço de hospedagem de terceiros?

Author: Ahmad F, 2013-01-24

21 answers

Tenta esta marcação:

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

Acho que pode ligar-se directamente à versão raw de uma imagem se estiver armazenada no seu repositório. ou seja

![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

Edit: apenas reparou na ligação de comentários ao artigo, o que sugere usar as páginas gh. Além disso, links relativos podem ser uma ideia melhor do que as URLs absolutas que eu postei acima.

 1205
Author: captainclam, 2017-04-24 08:40:22

Também pode usar caminhos relativos como

![Alt text](relative/path/to/img.jpg?raw=true "Title")
 212
Author: resultsway, 2017-08-30 01:25:13
  • você pode criar um novo número
  • enviar as imagens (arrastar & largar) para ele
  • Copie o URL das imagens e cole-o no seu README.md file.
Aqui está um vídeo detalhado do youTube explicado em detalhe:

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

 132
Author: Ahmad Ajmi, 2018-09-18 19:18:58

Também pode adicionar imagens com marcas de 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>
 63
Author: Evin1_, 2018-06-29 11:15:50
É muito mais simples do que isso.

Basta enviar a sua imagem para a raiz do repositório, e ligar para o nome do ficheiro sem qualquer localização, como por exemplo:

![Screenshot](screenshot.png)
 62
Author: , 2016-07-08 20:07:04
Muitas das soluções postadas estão incompletas ou não ao meu gosto.
  • um CDN externo como o imgur adiciona outra ferramenta à cadeia. Meh.
  • Criar um problema falso no localizador é uma invasão. Cria confusão e confunde os utilizadores. É uma dor migrar esta solução para um garfo, ou para fora do GitHub. Usando o ramo das páginas gh, as URLs ficam quebradiças. Outra pessoa que trabalha no projeto mantendo a GH-page pode não saber algo externo depende do caminho para estas imagens. O ramo de páginas gh tem um comportamento particular no GitHub que não é necessário para hospedar imagens CDN. Localizar activos no controlo de versões é uma coisa boa. À medida que um projeto cresce e muda, é uma forma mais sustentável de gerenciar e acompanhar as mudanças por vários usuários.
  • Se uma imagem se aplica a uma revisão específica do software, pode ser preferível ligar uma imagem imutável. Dessa forma, se a imagem for mais tarde atualizada para refletir mudanças no software, qualquer um ler o readme dessa revisão irá encontrar a imagem correta.

A minha solução preferida, inspirada por Este gist , é usar uma ramificação de activos com permalinks a 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 needed below.

Construir um "permalink" para esta revisão da imagem, e envolvê-lo em Markdown:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/{sha}/cat.png)

Por exemplo

![Cat](https://raw.githubusercontent.com/paulmelnikow/zsh-startup-timer/3923c60fc66d4223ccf063d169ccf2ff167b1270/cat.png)

Para mostrar sempre a última imagem no ramo dos activos, use assets no lugar do sha:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/assets/cat.png)

 24
Author: paulmelnikow, 2017-03-08 17:13:28

Persist a sua imagem (.png ) numa pasta (myFolder ) e adicione a seguinte linha ao seu README.md:

![Optional Text](../master/myFolder/image.png)

 14
Author: Darush, 2017-07-18 12:56:37

Sintaxe Básica

![myimage-alt-tag](url-to-image)
Aqui.
  1. my-image-alt-tag: texto que será apresentado se a imagem não for mostrada.
  2. url-a-imagem: seja qual for o seu recurso de imagem. URI da imagem

Exemplo:

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

Isto vai parecer o seguinte:

stack overflow image by alamin

 11
Author: Md. Alamin Mahamud, 2016-01-21 16:09:00
  • Criar um problema em relação à adição de imagens
  • Adicionar a imagem por arrastamento e largada ou por selecção de ficheiros
  • em seguida, copiar o código da imagem

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

Feito!

Em alternativa, você pode usar algum site de hospedagem de imagens como imgur e obter o seu url e adicioná - lo no seu README.md file ou você pode usar alguns arquivos estáticos hospedagem também.

Amostra questão

 11
Author: abe312, 2016-10-12 19:12:29

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

Funciona porque o Suporte do GitHub em linha-html

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

Observe Aqui

 9
Author: rocketspacer, 2018-07-08 17:46:09
Preciso de incluir algumas imagens no meu ficheiro README. Não sei como fazer.

Criei um pequeno assistente que lhe permite criar e personalizar galerias de imagens simples para o readme do seu repositório de GitHub: Veja ReadmeGalleryCreatorForGitHub.

O assistente aproveita-se do facto de que o GitHub permite que as marcas img ocorram no {[[0]}. Além disso, o assistente faz uso do truque popular de enviar imagens para GitHub, arrastando-as para o área de edição (como já mencionado em uma das respostas neste tópico).

 8
Author: B12Toaster, 2017-05-11 13:16:42

No meu caso, Uso imgur e uso a ligação directa desta forma.

![img](http://i.imgur.com/yourfilename.png)
 6
Author: Kegham K., 2016-12-13 02:00:44

Normalmente hospedei a imagem no site, isto pode ligar-se a qualquer imagem hospedada. Atira isto para o readme. Funciona para arquivos .rst, Não tenho a certeza sobre .md

.. image:: https://url/path/to/image
   :height: 100px
   :width: 200 px
   :scale: 50 %
 5
Author: Adam Hughes, 2015-05-12 17:15:56
Resolvi este problema. Você só precisa se referir ao arquivo readme de outra pessoa. No início, deve enviar um ficheiro de imagem para a biblioteca de códigos do github ! Em seguida, referência direta ao endereço do arquivo de imagem .



enter image description here

enter image description here

 5
Author: ylgwhyh, 2016-07-01 07:44:18

Pode ligar-se às imagens do seu projecto de README.md (ou externamente) utilizando a ligação GitHub CDN alternativa.

O URL ficará assim:

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

Tenho uma imagem SVG no meu projecto, e quando a referencio na minha documentação do projecto Python, ela não aparece.

Ligação do projecto

Aqui está o link do projecto para o ficheiro (não representa como um imagem):

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

Imagem incorporada por exemplo: image

Relação em bruto

Aqui está a ligação RAW para o ficheiro (ainda não aparece como uma imagem):

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

Imagem incorporada por exemplo: image

Ligação CDN

Usando a ligação CDN, posso ligar para o ficheiro usando (torna-se como uma imagem):

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

Imagem incorporada por exemplo:

É assim que eu sou capaz de usar imagens do meu projecto tanto no meu ficheiro README.md, como no meu projecto PyPi reestruturtredtext doucmentation (aqui)

 5
Author: JGC, 2018-02-10 16:57:13
No meu caso, queria mostrar um ecrã de impressão em {[[0]} mas também em NPM. Apesar de usar o caminho relativo estar a funcionar dentro dele, não estava a funcionar fora dele. Basicamente, mesmo que eu empurrasse meu projeto para NPM também (que simplesmente usa o mesmo readme.md, A imagem nunca estava mostrando.

Tentei de algumas maneiras, no final foi isto que funcionou para mim:

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

Agora vejo a minha imagem correctamente em NPM ou em qualquer outro lugar onde pudesse publicar o meu pacote.
 4
Author: ghiscoding, 2016-07-27 23:31:19

No caso de precisar de enviar algumas imagens para documentação, uma boa abordagem é usar git-lfs. Considerando que instalou o git-lfs, siga estes passos:

  1. Intialize 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 localização da imagem, por exemplo. doc. Em sistemas baseados em GNU / Linux e Unix isso pode ser feito via:

    cd project_folder
    mkdir doc
    git add doc
    
  3. Copiar colar todas as imagens na pasta doc. Depois adicionar eles através do comando git add.

  4. Commit and push.

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

    Https://media.githubusercontent.com/media/^github_username^/^repo^/^ramo^/^image_location no repo^

Onde: * ^github_username^ é o nome de utilizador no github (você pode encontrá-lo na página do perfil) * ^repo_name^ é o nome do repositório * ^branch^ é o ramo do repositório onde a imagem é enviada * ^image_location in the repo^ é a localização incluindo a pasta que a imagem é armazenada.

Também pode enviar a imagem primeiro e depois visitar a localização na sua página de projectos github e navegar até encontrar a imagem depois carregar no botão download e depois copiar-colar o url da barra de endereços do navegador.

Olhaisto do meu projecto como referência.

Então você pode usar o url para incluí-los usando a sintaxe de marcaçã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 marcação:
![In what order to compile the files](https://media.githubusercontent.com/media/pc-magas/myFirstEnclave/master/doc/SGX%20Compile%20workflow.png)
 4
Author: Dimitrios Desyllas, 2017-12-01 11:47:35
Estou apenas a estender ou a acrescentar um exemplo à resposta já aceite.

Uma vez que você tenha colocado a imagem em seu GitHub repo.

Depois:

  • abra o correspondente acordo de Github no seu navegador.
  • navegue até ao ficheiro de imagem de destino e abra a imagem numa página Nova. Opening the image in a new tab
  • copiar o url Copy the url from the browser tab
  • e finalmente inserir o url no seguinte padrão ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

Na minha case it is

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

Onde

  • shadmazumder é o meu username
  • Xcode é o projectname
  • master é o branch
  • InOnePicture.png é o image, no meu caso InOnePicture.png está no directório raiz.
 2
Author: Shad, 2018-08-29 19:40:30

O mais tardar

O Wikis pode mostrar imagens PNG, JPEG ou GIF

Agora pode usar:

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

- ou -

Siga estes passos:

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

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

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

  4. Na barra de ferramentas wiki, carregue em imagem .

  5. na caixa de diálogo" Inserir imagem", escreva o URL da imagem e o texto alt (que é usado pelos motores de busca e pelos leitores do ecrã).
  6. clique em OK.

Ver Docs .

 1
Author: Lal Krishna, 2018-01-23 09:01:07

ISTO FUNCIONA!!

Tome cuidado com o seu nome de ficheiro em maiúsculas e coloque o PNG file inroot e ligue-se ao nome do ficheiro sem qualquer localização:

![Screenshot](screenshot.png)
 1
Author: Farbod Aprin, 2018-08-14 18:10:16
Podemos fazer isto de forma simples.
  • crie um novo número no GitHub
  • Arrastar e largar imagens no corpo {[0] } de edição
Depois de alguns segundos, será gerado um link. Agora, copie o link ou URL da imagem e use-o qualquer plataforma suportada.
 0
Author: iPython, 2018-08-05 14:07:49