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?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.
Também pode usar caminhos relativos como
![Alt text](relative/path/to/img.jpg?raw=true "Title")
- 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.
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>
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)
- 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)
Persist a sua imagem (.png ) numa pasta (myFolder ) e adicione a seguinte linha ao seu README.md:
![Optional Text](../master/myFolder/image.png)
- 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
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.
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
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).
No meu caso, Uso imgur e uso a ligação directa desta forma.
![img](http://i.imgur.com/yourfilename.png)
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 %
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:
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:
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)
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)
NPM
ou em qualquer outro lugar onde pudesse publicar o meu pacote.
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:
-
Intialize o Git lfs para cada tipo de imagem:
git lfs *.png git lfs *.svg git lfs *.gif git lfs *.jpg git lfs *.jpeg
-
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
Copiar colar todas as imagens na pasta doc. Depois adicionar eles através do comando
git add
.Commit and push.
-
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)
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.
- copiar o url
- 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 meuusername
-
Xcode
é oprojectname
-
master
é obranch
-
InOnePicture.png
é oimage
, no meu casoInOnePicture.png
está no directório raiz.
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:
No GitHub, navegue para a página principal do repositório.
Sob o seu nome de repositório, clique em Wiki.
Usando a barra lateral do wiki, navegue para a página que deseja alterar e, em seguida, clique em Editar.
Na barra de ferramentas wiki, carregue em imagem .
- 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ã).
- clique em OK.
Ver Docs .
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)
- crie um novo número no GitHub
- Arrastar e largar imagens no corpo {[0] } de edição