Comment ajouter des images au fichier README.md sur GitHub ?

Question

Comment ajouter des images au fichier README.md sur GitHub ?

Demandé el 24 de Janvier, 2013: Quand la question a-t-elle été
25643 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Récemment, j'ai rejoint GitHub . J'y ai hébergé quelques projets.

J'ai besoin d'inclure des images dans mon fichier README. Je ne sais pas comment faire.

J'ai fait des recherches à ce sujet, mais tout ce que j'ai obtenu, ce sont des liens qui me disent "d'héberger les images sur le web et de spécifier le chemin de l'image dans le fichier README.md".

Existe-t-il un moyen de faire cela sans héberger les images sur des services d'hébergement Web tiers ?

Demandé el 24 de Janvier, 2013 par Midhun MP

14 votes

jefclaes.be/2012/04/add-images-to-github-readme.html

Commenté el 24 de Janvier, 2013 par Explosion Pills

11 votes

Duplicata de stackoverflow.com/questions/10189356/ qui a été publié en 2012.

Commenté el 22 de Décembre, 2013 par leetNightshade

219 votes

Sans être hors sujet, GitHub est un outil pour les programmeurs.

Commenté el 19 de Mai, 2014 par Lance Roberts

Afficher 1 autres commentaires

Answer 1

5 Réponses

Answer 2

3293voto

captainclam Points 2942

Essayez cette démarque :

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

Je pense que vous pouvez créer un lien direct vers la version brute d'une image si elle est stockée dans votre référentiel.

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

Répondu el 24 de Janvier, 2013 par captainclam (2942 Points )

286 votes

Vous devriez également envisager d'utiliser liens relatifs

Commenté el 21 de Janvier, 2014 par mgalgs

92 votes

Les liens relatifs ne sont pas d'une grande utilité ici, imaginez que votre readme est également affiché sur npm qui n'héberge pas l'image de cette manière - il doit établir un lien vers GitHub. Les srcs des images doivent se trouver dans le répertoire github.com et non le raw.github.com et non le sous-domaine raw.githubusercontent.com domaine.

Commenté el 24 de Juin, 2014 par Lee Crossley

0 votes

Je viens d'essayer en faisant un clic droit sur une image dans mon projet, en copiant le lien et en le plaçant dans le fichier README.md. Cela m'a donné le domaine github.com comme vous le suggérez, mais bien qu'il se soit affiché correctement sur github, il ne s'est pas affiché correctement sur ma copie locale. En revanche, en utilisant raw.github.com et en supprimant "blob/" du chemin, l'affichage s'est bien fait sur mon ordinateur local. Je dirais donc que la réponse acceptée ici est correcte telle quelle.

Commenté el 1 de Octobre, 2014 par Colin Keenan

Afficher 16 autres commentaires

Answer 3

900voto

purpletech Points 349

Vous pouvez également utiliser des chemins relatifs comme

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

Essayez également ce qui suit avec le résultat souhaité .fileExtention :

![plot](./directory_1/directory_2/.../directory_n/plot.png)

Répondu el 8 de Octobre, 2015 par purpletech (349 Points )

47 votes

Oui, c'est de loin la méthode la plus simple, à moins que vous ne soyez préoccupé par les performances. répertoire pas le repo Donc, si vous avez 'myimage.png' dans le même répertoire que 'about_pics.md', le balisage est le suivant : ![What is this](myimage.png)

Commenté el 8 de Mars, 2017 par Rich

10 votes

Cette solution est géniale car 1) elle fonctionne 2) les images sont également affichées dans une visionneuse locale, sans avoir besoin d'un accès à Internet.

Commenté el 22 de Mai, 2017 par Régis B.

2 votes

@Rich pouvez-vous développer votre commentaire concernant les performances. Quels sont les problèmes de performances liés à l'approche des chemins relatifs ?

Commenté el 9 de Septembre, 2017 par Lea Hayes

Afficher 11 autres commentaires

Answer 4

406voto

λhmad λjmi Points 821

Vous pouvez créer un nouveau numéro
télécharger (glisser-déposer) des images sur le site
Copiez l'URL des images et collez-la dans votre fichier README.md.

Voici une vidéo YouTube qui explique cela en détail :

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

Répondu el 28 de Octobre, 2014 par λhmad λjmi (821 Points )

44 votes

D'après ce que j'ai compris, vous n'avez pas vraiment besoin de sauver la question. De cette façon, vous n'avez pas vraiment besoin de ces tickets fictifs dans le gestionnaire de problèmes. La question est de savoir s'il s'agit d'une méthode "sûre", c'est-à-dire si GitHub détectera (après un certain temps) que l'image est orpheline et la supprimera donc du CDN de GitHub ?

Commenté el 23 de Octobre, 2016 par nolan6000

7 votes

Cette réponse a parfaitement fonctionné pour moi et je n'ai pas eu besoin d'enregistrer le nouveau problème dans le dépôt. J'ai trouvé une vidéo sur Youtube qui explique cela en détail : youtube.com/watch?v=nvPOUdz5PL4 .

Commenté el 14 de Juin, 2018 par Francislainy Campos

1 votes

Cette réponse fonctionne, et demande peu d'efforts. Le problème peut être écarté, mais l'URL de l'image persiste. L'URL de l'image est sous la forme de : images-utilisateurs.githubusercontent.com ...

Commenté el 29 de Novembre, 2018 par Sabuncu

Afficher 9 autres commentaires

Answer 5

274voto

Utilisateur non enregistré Points 0

C'est beaucoup plus simple que ça.

Téléchargez simplement votre image dans le dépôt Root, et créez un lien vers le nom du fichier sans chemin d'accès, comme suit :

![Screenshot](screenshot.png)

Répondu el 8 de Juillet, 2016 par Utilisateur non enregistré (0 Points )

27 votes

Non, je ne pense pas qu'ajouter des captures d'écran au repo git soit une bonne pratique. Surtout pas à la racine. La réponse d'Ahmad Ajmi est bien meilleure

Commenté el 10 de Octobre, 2016 par Arnaud P

48 votes

Pas à la Racine, mais vous pouvez facilement l'adapter pour docs/images ou quoi que ce soit, les petites captures d'écran en png sont correctes IMHO

Commenté el 23 de Janvier, 2017 par Christophe Roussy

9 votes

Cela devrait être la solution acceptée, surtout avec la suggestion de Christophe de placer les images sous l'arbre doc/.

Commenté el 11 de Avril, 2017 par Mike Ellis

Afficher 4 autres commentaires

Answer 6

131voto

Evin1_ Points 5581

Vous pouvez également ajouter des images avec de simples Balises HTML :

<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>

Répondu el 30 de Janvier, 2016 par Evin1_ (5581 Points )

2 votes

Lorsque vous utilisez une ou plusieurs balises HTML dans votre fichier markdown. Elles seront ignorées par Pandoc un convertisseur universel de documents.

Commenté el 6 de Avril, 2016 par Xinyang Li

2 votes

C'est le mieux pour qu'il puisse être centré ou placé sur un côté (pour les petites images, du moins).

Commenté el 21 de Juin, 2018 par Alexis Wilke

1 votes

Comment spécifier le chemin relatif ? Il n'est pas relatif à README.md (dans tous les cas ?).

Commenté el 10 de Septembre, 2018 par friederbluemle

Comment ajouter des images au fichier README.md sur GitHub ?

Réponses

C'est beaucoup plus simple que ça.

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment ajouter des images au fichier README.md sur GitHub ?

Réponses

C'est beaucoup plus simple que ça.

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: