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

Vous pouvez maintenant glisser et déposer les images tout en éditant le fichier readme.

Github créera un lien pour vous qui sera au format suivant :

https://user-images.githubusercontent.com/******/********.file_format

Sinon, au bas du fichier, il est indiqué "Joindre des fichiers en les faisant glisser, en les sélectionnant ou en les collant". Si vous cliquez sur cette mention, vous aurez la possibilité de télécharger un fichier directement ou de le coller !

Answer 2

Il suffit d'ajouter un <img> à votre README.md avec la source relative de votre dépôt. Si vous n'utilisez pas de src relative, assurez-vous que le serveur supporte CORS.

Cela fonctionne parce que le support de GitHub inline-html

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

Observer ici

Answer 3

Vous pouvez utiliser

![A test image](image.png)

Où ![A test image] est votre texte alternatif et (image.png) est le lien vers votre image.

---

Vous pouvez avoir l'image sur un service en nuage ou d'autres plateformes d'hébergement d'images en ligne. Ou vous pouvez fournir le lien de l'image depuis le référentiel si elle est dans le référentiel.

---

Vous pouvez également créer un dossier spécifique à l'intérieur de votre dépôt dédié aux images readme.

Answer 4

Processus étape par étape, Créez d'abord un dossier (nommez votre dossier) et ajoutez les images/images que vous voulez télécharger dans le fichier Readme.md. (vous pouvez également ajouter les images/images dans n'importe quel dossier existant de votre projet). Maintenant, cliquez sur l'icône d'édition du fichier Readme.md, ensuite

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

Après avoir ajouté l'image, vous pouvez voir l'aperçu des changements dans l'onglet "Aperçu des changements". Vous trouverez votre image ici. par exemple comme ceci, Dans mon cas,

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

dossier app -> dossier src -> dossier principal -> dossier res -> dossier drawable -> et dans le dossier drawable se trouve le fichier refrence_image.png. Pour ajouter plusieurs images, vous pouvez procéder comme suit,

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

Note 1 - Assurez-vous que le nom de votre fichier image ne contient pas d'espaces. S'il contient des espaces, vous devez ajouter %20 pour chaque espace entre le nom du fichier. Il est préférable de supprimer les espaces.

Note 2 - vous pouvez même redimensionner l'image en utilisant les balises HTML, ou il existe d'autres moyens. vous pouvez le googler pour en savoir plus. si vous en avez besoin.

Après cela, écrivez votre message de validation des modifications, et ensuite validez vos modifications.

Il y a beaucoup d'autres astuces pour le faire, comme créer un problème, etc, etc. C'est de loin la meilleure méthode que j'ai trouvée.

Answer 5

Utilisez des tables pour vous démarquer, cela lui donnera un charme distinct

La syntaxe de la table est :

Séparer chaque cellule de la colonne par un symbole |

et l'en-tête du tableau (Première ligne) par la 2ème ligne par ---

**	col 1	col 2
image 1	image 2	**

sortie

Maintenant, il suffit de mettre <img src="url/relativePath"> à l'image 1 et à l'image 2 si vous utilisez deux images

Remarque : si vous utilisez plusieurs images pour inclure plusieurs colonnes, vous pouvez utiliser les attributs de largeur et de hauteur pour que le résultat soit lisible.

Exemple

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

L'espacement n'a pas d'importance

Image de sortie

aidé par : adam-p