680 votes

Comment ajouter une capture d'écran aux README dans un dépôt github ?

Est-il possible de placer une capture d'écran dans le fichier README d'un dépôt GitHub ? Quelle est la syntaxe ?

2 votes

La solution correcte est d'utiliser des références relatives, selon cette réponse stackoverflow.com/a/11916467/1633251 (voir le commentaire avec le lien vers une nouvelle doc github sur la façon de faire cela). La réponse courte est d'utiliser [Read more words!](docs/more_words.md)

3 votes

La plupart des solutions proposent de pointer vers le repo lui-même. Qu'en est-il si vous voulez éviter les binaires dans le repo (même dans une branche séparée, comme proposé) et que vous voulez le stocker dans un endroit externe ? De bonnes pratiques ? Un gist peut-être (IDK si le gist peut être binaire ou juste du texte) ? créer un autre repo "myproject-assets" pour le projet "myproject" ? Un lieu d'image externe populaire similaire à la norme de facto de youtube pour le téléchargement de vidéos ?

2 votes

942voto

Paul Points 3329

Si vous utilisez le format Markdown (README.md) :

Si vous disposez de l'image dans votre dépôt, vous pouvez utiliser une URL relative :

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

Si vous devez intégrer une image hébergée ailleurs, vous pouvez utiliser l'URL complète.

![Alt text](http://full/path/to/img.jpg "Optional title")

GitHub recommande d'utiliser liens relatifs avec le ?raw=true pour s'assurer que les dépôts bifurqués pointent correctement.

Le site raw=true est là pour garantir que l'image vers laquelle vous établissez un lien sera rendue telle quelle. Cela signifie que seule l'image sera liée, et non l'ensemble de l'interface GitHub pour ce fichier respectif. Voir ce commentaire pour plus de détails.

Regardez un exemple : https://raw.github.com/altercation/solarized/master/README.md

Si vous utilisez des SVG, vous devrez définir l'attribut sanitize comme suit true également : ?raw=true&sanitize=true . (Merci @EliSherer)

Aussi, la documentation sur les liens relatifs dans les fichiers README : https://help.github.com/articles/relative-links-in-readmes

Et bien sûr, la documentation markdown : http://daringfireball.net/projects/markdown/syntax

De plus, si vous créez une nouvelle branche screenshots pour stocker les images, vous pouvez éviter qu'elles ne se trouvent dans le fichier master arbre de travail

Vous pouvez ensuite les intégrer en utilisant :

![Alt text](/../<branch name>/path/to/image.png?raw=true "Optional Title")

1 votes

J'ai ajouté la documentation officielle sur les liens relatifs, mais je ne parviens pas à trouver un dépôt qui les utilise. Si vous avez des suggestions, je serai heureux de vous aider, car le but est d'aider plus de personnes, et non de rester dans le champ d'application (mon erreur ici).

2 votes

@Paul , voici un exemple de référentiel faisant exactement cela ! github.com/Tarrasch/zsh-bd

0 votes

Vous pouvez également lier l'image à un endroit autre que le fichier d'image brut en utilisant la syntaxe suivante : [![Alt text](/path/to/img.jpg?raw=true)][http://example.com/]

85voto

Bien qu'il existe déjà une réponse acceptée, je voudrais ajouter un autre moyen de télécharger des images dans le fichier readme sur GitHub.

  • Vous devez créer un problème dans votre dépôt
  • Glissez et déposez votre image dans la zone de commentaires
  • Une fois le lien pour l'image généré, insérez-le dans votre fichier readme.

Pour plus de détails, vous pouvez trouver ici

7 votes

Je suis intéressé par la durée de vie des images chargées de cette manière. Github effectue-t-il un nettoyage des images ? Par exemple, "si cette image n'est pas référencée dans un problème github, je peux la supprimer sans risque"...

1 votes

@Artin probablement seulement lorsque le problème est complètement supprimé. Les problèmes fermés sont conservés pour toujours car ils jouent un rôle très important dans la documentation et le débogage.

55voto

Ryan Points 1830

J'ai constaté que le chemin d'accès à l'image dans mon dépôt ne suffisait pas, je devais créer un lien vers l'image sur le site Web de l'entreprise. raw.github.com sous-domaine.

Format de l'URL https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH}

Exemple de Markdown ![Settings Window](https://raw.github.com/ryanmaxwell/iArrived/master/Screenshots/Settings.png)

5 votes

Downvoting ceci à cause du commentaire de @sorens sur la réponse acceptée. Il n'est pas bon de spécifier le bain absolu car cela ne fonctionnera pas bien sur les dépôts bifurqués. (Ou si vous renommez votre repo, ou si github change de nom de domaine, etc. etc.)

10 votes

@LinusUnnebäck : Il y a une bonne raison d'utiliser des chemins absolus imho : Si le readme.md est utilisé à d'autres endroits également, par exemple, comme page principale de Doxygen. Les liens relatifs ne fonctionneront pas dans ce cas.

2 votes

@Ela782 bien que, sur une autre note, cela devrait ce n'est pas un problème pour les logiciels qui déchirent les fichiers README. spécifiquement à partir de GitHub ; un tel logiciel devrait savoir résoudre correctement les URL relatives. npm fait par exemple.

44voto

diju Points 479

3 JUIN 2020 : RÉPONSE DE TRAVAIL-

  1. Téléchargez votre image sur postimage.org
  2. Copie Github-Markdown-Url après avoir téléchargé l'image
  3. Insérez dans votre ReadMe

2 votes

Vous êtes le seul dont la réponse m'a été utile.

2 votes

C'est une bonne réponse, mais sachez que vous dépendez de ce service pour toujours. Il ne garantit pas qu'il ne disparaîtra pas un jour. GitHub non plus, mais suffisamment de projets et de personnes importantes en dépendent pour que je sois sûr qu'on me fournisse au moins des sauvegardes / vidages avant qu'il ne tombe en panne. De plus, je ne sais pas ce que disent ses termes et conditions, mais là encore, comme beaucoup plus de gens ont étudié les T&C de GitHub, je lui fais plus confiance.

0 votes

...et aussi si l'image est sur GitHub, l'image et le fichier readme disparaîtront ensemble.

23voto

mmcorrelo Points 232

La ligne ci-dessous devrait correspondre à ce que vous recherchez

si votre fichier est dans le dépôt

![ScreenShot](https://raw.github.com/{username}/{repository}/{branch}/{path})

si votre fichier est dans une autre url externe

![ScreenShot](https://{url})

2 votes

Suggère d'utiliser le lien relatif du fichier image, voir Liens relatifs dans les README - Centre d'aide Github

2 votes

-1 pour la raison donnée par @shaobin0604 ; les docs officiels recommandent d'utiliser des liens relatifs lorsque vous liez un fichier dans votre propre repo, de sorte que le lien pointe au bon endroit lorsque vous bifurquez.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X