Est-il possible de placer une capture d'écran dans le fichier README dans un référentiel GitHub? Quelle est la syntaxe?

Si vous utilisez Markdown (README.md):

À condition que vous ayez l'image dans votre référentiel, 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 une URL complète

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

GitHub vous recommande d'utiliser des liens relatifs avec le ?raw=trueparamètre pour vous assurer que le point de dépôt forké est correctement.

Le raw=trueparamètre est là pour garantir que l'image à laquelle vous liez sera rendue telle quelle. Cela signifie que seule l'image sera liée à, pas toute l'interface GitHub pour ce fichier respectif. Voir ce commentaire pour plus de détails.

Découvrez un exemple: https://raw.github.com/altercation/solarized/master/README.md

Si vous utilisez SVGs alors vous devrez définir l'attribut sanitize à trueainsi: ?raw=true&sanitize=true. (Merci @EliSherer)

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

Et bien sûr, les documents de démarque: http://daringfireball.net/projects/markdown/syntax

De plus, si vous créez une nouvelle branche screenshotspour stocker les images, vous pouvez éviter qu'elles ne soient dans l' masterarborescence de travail

Vous pouvez ensuite les intégrer en utilisant:

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

Même s'il existe déjà une réponse acceptée, je voudrais ajouter une autre façon de télécharger des images dans le fichier Lisez-moi sur GitHub.

• Vous devez créer un problème dans votre référentiel
• Faites glisser et déposez dans la zone de commentaire votre image
• Une fois le lien pour l'image généré, insérez-le dans votre fichier Lisez-moi

Plus de détails que vous pouvez trouver ici

J'ai trouvé que le chemin vers l'image dans mon repo ne suffisait pas, je devais faire un lien vers l'image sur le raw.github.comsous - domaine.

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

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

1. Téléchargez votre image sur postimage.org
2. Obtenir l'URL de github Markdown
3. Insérez dans votre fichier Lisezmoi

Une ligne ci-dessous devrait être ce que vous recherchez

si votre fichier est dans le référentiel

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

si votre fichier est dans une autre URL externe

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

La syntaxe de démarque pour afficher des images est en effet:

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

MAIS: Comment fournir le url?

• Vous ne voulez probablement pas encombrer votre dépôt avec des captures d'écran, elles n'ont rien à voir avec le code
• vous ne voudrez peut-être pas non plus gérer les tracas liés à la mise à disposition de votre image sur le Web ... (téléchargez-la sur un serveur ...).

Donc ... vous pouvez utiliser cette astuce géniale pour que github héberge votre fichier image. TDLR:

1. créer un problème sur la liste des problèmes de votre dépôt
2. faites glisser et déposez votre capture d'écran sur ce problème
3. copiez le code de démarque que github vient de créer pour que vous puissiez afficher votre image
4. collez-le sur votre fichier Lisez-moi (ou où vous voulez)

http://solutionoptimist.com/2013/12/28/awesome-github-tricks/

Beaucoup plus simple que d'ajouter une URL Téléchargez simplement une image dans le même référentiel, comme:

![Screenshot](screenshot.png)

ajouter ceci à README

<div align="center">
    <img src="/screenshots/screen1.jpg" width="400px"</img> 
</div>

Réduction: ![Screenshot](http://url/to/img.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 ![Screenshot](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

Méthode 1-> Méthode Markdown

![Alt Text](https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH})

Méthode 2-> manière HTML

<img src="https://link(format same as above)" width="100" height="100"/>

ou

<img src="https://link" style=" width:100px ; height:100px " />

Remarque -> Si vous ne souhaitez pas styliser votre image, c'est-à-dire redimensionner, supprimez la partie style

Tout d'abord, créez un répertoire (dossier) à la racine de votre référentiel local qui contiendra le fichier que screenshotsvous souhaitez ajouter. Appelons le nom de ce répertoire screenshots. Placez les images (JPEG, PNG, GIF, `etc.) que vous souhaitez ajouter dans ce répertoire.

Capture d'écran d'Android Studio Workspace

Deuxièmement, vous devez ajouter un lien vers chaque image dans votre fichier README. Donc, si j'ai des images nommées 1_ArtistsActivity.pnget 2_AlbumsActivity.pngdans mon répertoire de captures d'écran, j'ajouterai leurs liens comme ceci:

 <img src="screenshots/1_ArtistsActivity.png" height="400" alt="Screenshot"/> <img src=“screenshots/2_AlbumsActivity.png" height="400" alt="Screenshot"/>

Si vous souhaitez que chaque capture d'écran sur une ligne distincte, écrivez leurs liens sur des lignes distinctes. Cependant, il est préférable d'écrire tous les liens sur une seule ligne, séparés par un espace uniquement. Cela peut en fait ne pas sembler trop beau, mais ce faisant, GitHub les organise automatiquement pour vous.

Enfin, validez vos modifications et appuyez dessus!

J'ai googlé quelques questions similaires et je n'ai vu aucune réponse à mon problème et à sa solution assez simple / facile.

Google Cloud Storage - une approche légèrement différente des images dans les fichiers README

Voilà: comme l'OP, je voulais une image dans mon Github README, et, connaissant la syntaxe Markdown pour le faire, je l'ai tapée:

![My Image](https://storage.cloud.google.com/${MY_BUCKET}/${MY_IMAGE}

Vous devez effectuer les substitutions réelles ci-dessus (par exemple, MY_IMAGE = image.jpg) pour que cela fonctionne.

Mais, attendez ... échec - il n'y a pas de véritable photo rendue! Et le lien est exactement comme indiqué par Google Storage!

Github camo- Images anonymes

Github héberge vos images de manière anonyme , yay! Cependant, cela pose un problème pour les ressources de stockage Google. Vous devez obtenir l'URL générée depuis votre console Google Cloud.

Je suis sûr qu'il existe un moyen plus simple, cependant, visitez simplement votre point de terminaison d'URL donné et copiez l'URL longue. Détails:

Instructions

1. Consultez votre console de stockage: https://console.cloud.google.com/storage/browser/ $ {MY_BUCKET}? Project = $ {MY_PROJECT}
2. Cliquez sur l'image que vous souhaitez afficher dans Github (cela fait apparaître la page "Détails de l'objet")
3. Copiez les pâtes de cette URL (celle commençant par httpsnot gs) dans un nouvel onglet / fenêtre de navigateur
4. Copiez les pâtes la nouvelle URL générée - elle devrait être plus longue - de votre nouvel onglet / fenêtre de navigateur dans votre fichier Github README

J'espère que cela aidera à accélérer et à clarifier ce problème pour quiconque.

Pour moi, le meilleur moyen est -

1. Créez un nouveau problème avec ce référentiel sur github, puis téléchargez le fichier au format gif. Pour convertir des fichiers vidéo au format gif, vous pouvez utiliser ce site Web http://www.online-convert.com/
2. Soumettez le problème nouvellement créé.
3. Copiez l'adresse du fichier téléchargé
4. Enfin dans votre fichier README mettez! [Démo] (ADRESSE COPIÉE)

J'espère que cela vous aidera.

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

![Alt text]("enter image url of repositoryhere") 

Avec les images situées dans le /screen-shotsrépertoire. L'extérieur <div>permet de positionner les images. Le rembourrage est réalisé en utilisant <img width="desired-padding" height="0">.

<div align="center">
        <img width="45%" src="screen-shots/about.PNG" alt="About screen" title="About screen"</img>
        <img height="0" width="8px">
        <img width="45%" src="screen-shots/list.PNG" alt="List screen" title="List screen"></img>
</div>