Question Ajouter des images à README.md sur GitHub


Récemment j'ai rejoint GitHub. J'ai hébergé quelques projets là-bas.

J'ai besoin d'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 eu, c'était des liens qui me disaient «d'héberger des images sur le web et de spécifier le chemin de l'image dans le fichier README.md».

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


1069
2018-01-24 05:44


origine


Réponses:


Essayez cette démarque:

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

Je pense que vous pouvez lier directement à la version brute d'une image si elle est stockée dans votre référentiel. c'est à dire.

![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

Modifier: juste remarqué commentaire reliant à l'article qui suggère d'utiliser gh-pages. En outre, les liens relatifs peuvent être une meilleure idée que les URL absolues que j'ai posté ci-dessus.


1132
2018-01-24 05:46



Vous pouvez également utiliser des chemins relatifs comme

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

182
2017-10-08 03:18



  • Vous pouvez créer un nouveau problème
  • télécharger (glisser-déposer) des images à ce sujet
  • Copiez l'URL des images et copiez la page l'URL de l'image dans votre fichier README.md.

Voici une vidéo détaillée de YouTube expliquée en détail:

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


116
2017-10-28 06:03



C'est beaucoup plus simple que ça.

Il suffit de télécharger votre image à la racine du dépôt, et de lier le nom de fichier sans aucun chemin, comme ceci:

![Screenshot](screenshot.png)

58
2017-07-08 20:07



Vous pouvez également ajouter des images avec simple 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>

58
2018-01-30 04:45



Beaucoup de solutions posté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 l'outil de suivi des problèmes est un hack. Cela crée de l'encombrement et crée de la confusion chez les utilisateurs. C'est une douleur de migrer cette solution vers une fourchette, ou hors de GitHub.
  • L'utilisation de la branche gh-pages rend les URL fragiles. Une autre personne travaillant sur le projet qui maintient la gh-page peut ne pas savoir quelque chose d'extérieur dépend du chemin vers 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 ressources dans le contrôle de version est une bonne chose. À mesure qu'un projet prend de l'ampleur et change, il s'agit d'un moyen plus durable de gérer et de suivre les modifications apportées par 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. Ainsi, si l'image est mise à jour ultérieurement pour refléter les modifications apportées au logiciel, toute personne lisant le readme de cette révision trouvera la bonne image.

Ma solution préférée, inspirée par cet essentiel, est d'utiliser un branche des actifs avec permaliens à 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 needed below.

Construire un "permalien" à cette révision de l'image, et l'envelopper dans Markdown:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/{sha}/cat.png)

par exemple.

![Cat](https://raw.githubusercontent.com/paulmelnikow/zsh-startup-timer/3923c60fc66d4223ccf063d169ccf2ff167b1270/cat.png)

Pour toujours afficher la dernière image sur la branche des ressources, utilisez assets à la place du sha:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/assets/cat.png)


20
2018-03-08 17:13



Commettre votre image (image.png) dans un dossier (mon dossier) et ajoutez la ligne suivante dans votre README.md:

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


13
2018-06-14 10:01



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:

stack overflow image by alamin


11
2018-01-21 16:09