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

Je dois inclure des images dans mon fichier README. Je ne sais pas comment faire ça.

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

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

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. c'est à dire

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

Vous pouvez également utiliser des chemins relatifs comme

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

• Vous pouvez créer un nouveau problème
• y télécharger (glisser-déposer) des images
• Copiez l'URL des images et collez-la dans votre fichier README.md.

voici une vidéo détaillée sur YouTube expliquée en détail:

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

C'est beaucoup plus simple que ça.

Téléchargez simplement votre image à la racine du référentiel et liez au nom de fichier sans aucun chemin, comme ceci:

![Screenshot](screenshot.png)

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>

Beaucoup de solutions publiées sont incomplètes ou pas à mon goût.

• Un CDN externe comme imgur ajoute un autre outil à la chaîne. Meh.
• Créer un problème factice dans le suivi des problèmes est un hack. Il crée de l'encombrement et déroute les utilisateurs. C'est pénible de migrer cette solution vers un fork, ou hors de GitHub.
• L'utilisation de la branche gh-pages rend les URL fragiles. Une autre personne travaillant sur le projet de maintenance de la page gh peut ne pas savoir que quelque chose d'extérieur dépend du chemin d'accès à ces images. La branche gh-pages a un comportement particulier sur GitHub qui n'est pas nécessaire pour héberger des images CDN.
• Le suivi des actifs dans le contrôle de version est une bonne chose. Au fur et à mesure qu'un projet grandit et change, c'est un moyen plus durable de gérer et de suivre les changements de plusieurs utilisateurs.
• Si une image s'applique à une révision spécifique du logiciel, il peut être préférable de lier une image immuable. De cette façon, si l'image est mise à jour ultérieurement pour refléter les modifications apportées au logiciel, toute personne lisant le fichier Lisez-moi de cette révision trouvera l'image correcte.

Ma solution préférée, inspirée de cet essentiel , est d'utiliser une branche d'actifs avec des permaliens vers des révisions spécifiques .

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 optional, you'll see below.

Construisez un «permalien» vers cette révision de l'image et enveloppez-la dans Markdown.

La recherche manuelle du SHA de validation n'est cependant pas pratique, donc comme raccourci, appuyez sur Y pour un lien permanent vers un fichier dans un commit spécifique, comme le dit cette page help.github.

Pour toujours afficher la dernière image sur la branche des ressources, utilisez l'URL de blob:

https://github.com/github/{repository}/blob/assets/cat.png 

(À partir de la même page d'aide de GitHub, les vues de fichier montrent la dernière version sur une branche )

Validez votre image ( image.png ) dans un dossier ( myFolder ) et ajoutez la ligne suivante dans votre fichier README.md :

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

• Créer un problème concernant l'ajout d'images
• Ajouter l'image par glisser-déposer ou par sélecteur de fichier

• Copiez ensuite la source de l'image

• Maintenant, ajoutez ![alt tag](http://url/to/img.png)à votre fichier README.md

Terminé!

Alternativement, vous pouvez utiliser un site d'hébergement d'images comme imguret obtenir son URL et l'ajouter dans votre fichier README.md ou vous pouvez également utiliser un hébergement de fichiers statiques.

Exemple de problème

Je dois inclure des images dans mon fichier README. Je ne sais pas comment faire ça.

J'ai créé un petit assistant qui vous permet de créer et de personnaliser des galeries d'images simples pour le fichier Lisez- moi de votre référentiel GitHub: Voir ReadmeGalleryCreatorForGitHub .

L'assistant tire parti du fait que GitHub autorise les balises img à apparaître dans le README.md. De plus, l'assistant utilise l'astuce populaire de téléchargement d'images sur GitHub en les glissant-déposant dans la zone de problème (comme déjà mentionné dans l'une des réponses de ce fil).

Ajoutez simplement une <img>balise à votre fichier README.md avec src relatif à votre référentiel. Si vous n'utilisez pas de src relatif, assurez-vous que le serveur prend en charge CORS.

Cela fonctionne parce que GitHub supporte inline-html

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

Observez ici

Syntaxe de base

![myimage-alt-tag](url-to-image)

Ici:

1. my-image-alt-tag: texte qui sera affiché si l'image n'est pas affichée.
2. url-to-image: quelle que soit votre ressource d'image. URI de l'image

Exemple:

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

Cela ressemblera à ceci:

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

La syntaxe de la table est:

Séparez chaque cellule de colonne par le symbole |

et en-tête de tableau (première ligne) par 2e ligne par ---

| col 1 | col 2 |
| ------------ | ------------- |
| image 1 | image 2 |

production

Maintenant, mettez simplement l' <img src="url/relativePath">image 1 et l'image 2 si vous utilisez deux images

Remarque: si vous utilisez plusieurs images, incluez simplement plus de colonnes, vous pouvez utiliser l'attribut width et height pour le rendre 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

Vous pouvez simplement faire:

git checkout --orphan assets
cp /where/image/currently/located/on/machine/diagram.png .
git add .
git commit -m 'Added diagram'
git push -u origin assets

Ensuite, vous pouvez simplement le référencer dans le READMEfichier comme suit:

![diagram](diagram.png)

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

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

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

L'URL ressemblera à ceci:

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

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

Lien du 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 RAW vers le fichier (ne s'affiche toujours pas en tant qu'image):

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

Exemple d'image intégrée:

Lien CDN

À l'aide du lien CDN, je peux créer un lien vers le fichier à l'aide de (rendu sous forme d'image):

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

Exemple d'image intégrée:

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

J'ai résolu ce problème. Il vous suffit de vous référer au fichier Lisez-moi de quelqu'un d'autre.

Au début, vous devez télécharger un fichier image dans la bibliothèque de codes github! Puis référence directe à l'adresse du fichier image.

J'héberge généralement l'image sur le site, cela peut être lié à n'importe quelle image hébergée. Jetez simplement cela dans le fichier Lisez-moi. Fonctionne pour les .rstfichiers, pas sûr.md

.. image:: https://url/path/to/image
   :height: 100px
   :width: 200 px
   :scale: 50 %

Dans mon cas, je voulais montrer un écran d'impression Githubmais aussi NPM. Même si l'utilisation du chemin relatif fonctionnait à l'intérieur Github, cela ne fonctionnait pas à l'extérieur. Fondamentalement, même si j'ai également poussé mon projet NPM(qui utilise simplement le mêmereadme.md , l'image ne s'affichait jamais.

J'ai essayé plusieurs façons, à la fin, c'est ce qui a fonctionné pour moi:

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

Je vois maintenant correctement mon image sur NPMou ailleurs où je pourrais publier mon package.

Si vous avez besoin de télécharger des photos pour la documentation, une bonne approche consiste à utiliser git-lfs . En supposant que vous avez installé git-lfs, procédez comme suit:

1. Intialisez 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 d'image, par exemple. doc. Sur les systèmes basés sur GNU / Linux et Unix, cela peut être fait via:

   cd project_folder
   mkdir doc
   git add doc
   

3. Copiez collez toutes les images dans le dossier doc. Ajoutez-les ensuite via la git addcommande.

4. Engagez-vous et poussez.

5. Les images sont accessibles au public 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 dans lequel l'image est stockée.

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

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

Ensuite, vous pouvez utiliser l'URL pour les inclure en utilisant la syntaxe de démarque mentionnée ci-dessus:

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

Par exemple: Supposons que nous utilisons cette photo Ensuite, vous pouvez utiliser la syntaxe de démarque:

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

JUSTE CE FONCTIONNE !!

prenez soin de votre nom de fichier en majuscule dans la balise et mettez le fichier PNG dans la racine, et liez au nom de fichier sans aucun chemin:

![Screenshot](screenshot.png)

Je ne fais qu'étendre ou ajouter un exemple à la réponse déjà acceptée.

Une fois que vous avez mis l'image sur votre dépôt Github.

Alors:

• Ouvrez le dépôt Github correspondant sur votre navigateur.
• Accédez au fichier image cible Ensuite, ouvrez simplement l'image dans un nouvel onglet.
• Copiez l'url
• Et enfin insérez l'URL au modèle suivant ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

Sur mon cas c'est

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

Où

• shadmazumder est mon username
• Xcode est le projectname
• master est le branch
• InOnePicture.pngest le image, Sur mon cas InOnePicture.pngest dans le répertoire racine.

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

1) utilisez la balise HTML img,

2)! [] (Le chemin où votre image est enregistrée / image-name.png)

le chemin que vous pouvez copier à partir de l'URL dans le navigateur pendant que vous avez ouvert cette image. il peut y avoir un problème d'espacement, assurez-vous donc qu'il y a de l'espace en noir et blanc deux mots de chemin ou dans le nom de l'image ajoutez->% 20. tout comme le font les navigateurs.

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

Cette réponse peut également être trouvée sur: https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md

Affichez les images du repo en utilisant:

pré-ajouter un domaine: https://raw.githubusercontent.com/

ajouter le drapeau: ?sanitize=true&raw=true

utilisation <img /> balise

• Domaine :raw.githubusercontent.com/
• Nom d'utilisateur :YourUserAccount/
• Repo :YourProject/
• Succursale :YourBranch/
• Chemin :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

J'ai trouvé une autre solution mais assez différente et je vais l'expliquer

Fondamentalement, j'ai utilisé la balise pour afficher l'image, mais je voulais aller sur une autre page lorsque l'image a été cliquée et voici comment je l'ai fait.

<a href="the-url-you-want-to-go-when-image-is-clicked.com" />
<img src="image-source-url-location.com" />

Si vous le placez les uns à côté des autres, séparé par une nouvelle ligne, je suppose que lorsque vous cliquez sur l'image, il va à la balise qui a le href vers l'autre site que vous souhaitez rediriger.

DERNIER

Les wikis peuvent afficher des images PNG, JPEG ou GIF

Vous pouvez maintenant utiliser:

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

-OU-

Suivez ces étapes:

1. Sur GitHub, accédez à la page principale du référentiel.

2. Sous le nom de votre référentiel, cliquez sur Wiki.

3. À l'aide de la barre latérale du wiki, accédez à la page que vous souhaitez modifier, puis cliquez sur Modifier.

4. Dans la barre d'outils du wiki, cliquez sur Image .

5. Dans la boîte de dialogue "Insérer une image", saisissez l'URL de l'image et le texte de remplacement (utilisé par les moteurs de recherche et les lecteurs d'écran).
6. Cliquez sur OK.

Référez Docs .

Pensez à utiliser un tablesi vous ajoutez plusieurs captures d'écran et souhaitez les aligner à l'aide de données tabulaires pour une meilleure accessibilité, comme indiqué ici:

Si votre analyseur de démarques le prend en charge, vous pouvez également ajouter l' role="presentation"attribut WIA-ARIA à l'élément TABLE et omettre les thbalises.

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

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

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

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

dossier d'application -> dossier src -> dossier principal -> dossier res -> dossier dessinable -> et à l'intérieur du dossier drawable fichier refrence_image.png se trouve. Pour ajouter plusieurs images, vous pouvez le faire comme ceci,

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

Remarque 1 - Assurez-vous que le nom de votre fichier image ne contient aucun espace. S'il contient des espaces, vous devez ajouter% 20 pour chaque espace entre le nom de fichier. Il vaut mieux supprimer les espaces.

Remarque 2 - vous pouvez même redimensionner l'image à l'aide de balises HTML, ou il existe d'autres façons. vous pouvez le rechercher sur Google. si tu en as besoin.

Après cela, écrivez votre message de modifications de validation, puis validez vos modifications.

Il existe de nombreux autres astuces pour le faire comme, créer un problème, etc., etc. De loin, c'est la meilleure méthode que j'ai rencontrée.

Nous pouvons le faire simplement,

• créer un nouveau numéro sur GitHub
• glisser-déposer des images sur le corps divdu problème

après quelques secondes, un lien sera généré. Maintenant, copiez le lien ou l'URL de l'image et utilisez-la sur n'importe quelle plate-forme prise en charge.

Ajouter une image dans votre référentiel depuis l'option de téléchargement de fichier puis dans le fichier README

![Alt text]("enter repository image URL here") 

Il y a encore une autre option que je n'ai pas vue mentionnée. Vous pouvez simplement créer un autre référentiel sous votre utilisateur ou organisation appelé «actifs». Envoyez vos images à ce référentiel et référencez-les à partir de vos autres référentiels:

![alt text](https://raw.githubusercontent.com/my-org/assets/master/folder/logo.png)

Je l'ai fait dans l'un de mes repos et ça me va bien. Je peux version mes images README pour tous mes projets indépendamment de mon code, mais toujours les garder au même endroit . Aucun problème ou branche ou autre artefact facilement égaré requis.