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

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 ?

Answer 1

Dans mon cas, j'utilise imgur et utiliser le lien direct de cette façon.

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

Answer 2

Vous pouvez créer un lien vers les images de votre projet à partir de README.md (ou en externe) en utilisant le lien CDN alternatif de github.

L'URL ressemblera à ceci :

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

J'ai une image SVG dans mon projet, et lorsque je la référence dans la documentation de mon projet Python, elle ne s'affiche pas.

Lien vers le projet

Voici le lien du projet vers le fichier (ne s'affiche pas en tant qu'image) :

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

Exemple d'image intégrée :

Lien brut

Voici le lien vers le fichier RAW (qui ne s'affiche toujours pas comme une image) :

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

Exemple d'image intégrée :

Lien CDN

En utilisant le lien CDN, je peux créer un lien vers le fichier en utilisant (rendering comme une image) :

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

Exemple d'image intégrée :

C'est ainsi que je peux utiliser les images de mon projet à la fois dans mon site Web et dans mon site Web. README.md et dans mon projet PyPi la doucmentation reStructredText ( ici )

Answer 3

Cette réponse peut également être consultée à l'adresse suivante https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md

Afficher les images du dépôt en utilisant :

Préparez le domaine : https://raw.githubusercontent.com/

drapeau de l'appendice : ?sanitize=true&raw=true

utiliser <img /> étiquette

L'exemple d'url fonctionne pour les svg, png et jpg :

• Domaine : raw.githubusercontent.com/
• Nom d'utilisateur : YourUserAccount/
• Repo : YourProject/
• Branche : YourBranch/
• Chemin d'accès : DirectoryPath/
• Nom de fichier : example.png

Fonctionne pour SVG, PNG et JPEG

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

Exemple de code de travail affiché ci-dessous après utilisation :

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

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

Answer 4

Il y a deux façons simples de le faire,

1) utiliser la balise HTML img ,

2) 

Le chemin peut être copié à partir de l'URL dans le navigateur lorsque vous avez ouvert l'image. Il peut y avoir un problème d'espacement, alors assurez-vous que s'il y a un espace entre deux mots du chemin ou dans le nom de l'image, ajoutez-> %20, comme le fait le navigateur.

Les deux fonctionnent, si vous voulez en savoir plus, vous pouvez consulter mon github ->. https://github.com/adityarawat29

Answer 5

Si vous avez besoin de télécharger des images pour la documentation, une bonne approche est d'utiliser git-lfs . En supposant que vous avez installé le git-lfs, suivez ces étapes :

1. Initialiser git lfs pour chaque type d'image :

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

2. Créez un dossier qui sera utilisé comme emplacement de l'image, par exemple. doc . Sur GNU/Linux et les systèmes basés sur Unix, cela peut être fait via :

   cd project_folder
   mkdir doc
   git add doc

3. Copiez-collez toutes les images dans le dossier doc. Ensuite, ajoutez-les via git add commandement.

4. Engagez-vous et poussez.

5. Les images sont disponibles publiquement dans l'url suivante :

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

Où : * ^github_username^ est le nom d'utilisateur dans github (vous pouvez le trouver dans la page de profil) * ^repo_name^ est le nom du référentiel * ^branch^ est la branche du référentiel où l'image est téléchargée * ^image_location in the repo^ est l'emplacement, y compris le dossier, où l'image est stockée.

Vous pouvez également télécharger l'image en premier lieu, puis visiter l'emplacement dans la page github de vos projets et naviguer jusqu'à ce que vous trouviez l'image, puis appuyer sur le bouton download puis copier-coller l'URL dans la barre d'adresse du navigateur.

Regardez ce de mon projet comme référence.

Vous pouvez ensuite utiliser l'url pour les inclure en utilisant la syntaxe markdown mentionnée ci-dessus :

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

Ex : Supposons que nous utilisons cette photo Vous pouvez alors utiliser la syntaxe markdown :

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