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

Question

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

Answer 1

À partir de mars 2021, cela est désormais pris en charge :

Attacher des fichiers à des fichiers markdown

Vous pouvez désormais joindre des fichiers, y compris des images, aux fichiers markdown pendant que vous les éditez sur le web.

Cela fonctionne comme les pièces jointes dans les problèmes et les demandes de retrait et prend en charge les mêmes types de fichiers.

Il suffit de glisser et de faire glisser, de cliquer et de sélectionner, ou de coller.

Remarque : si vous ajoutez une image à un fichier markdown, n'importe qui peut voir l'URL de l'image anonymisée sans authentification, même si le fichier markdown se trouve dans un dépôt privé.
Pour préserver la confidentialité des images, servez-les à partir d'un réseau privé ou d'un serveur nécessitant une authentification. Pour plus d'informations sur les URL anonymes, voir " À propos des URL d'images anonymes ".

Answer 2

Ajouter ![ScreenShot](screenshot.png) dans le readme markdown comme mentionné par plusieurs personnes ci-dessus. Remplacez screenshot.png par le nom de l'image que vous avez téléchargée dans votre dépôt.

Mais voici un conseil pour les débutants lorsque vous téléchargez l'image (car j'ai moi-même commis cette erreur) :

assurez-vous que le nom de votre image ne contient pas d'espaces. Mon image originale a été enregistrée sous le nom de "Screenshot day month year id.png". Si vous ne changez pas le nom en quelque chose comme contentofimage.png, elle n'apparaîtra pas comme image dans votre fichier readme.

Answer 3

J'ai cherché sur Google quelques questions similaires et je n'ai trouvé aucune réponse à mon problème, qui est pourtant très simple et facile à résoudre.

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

Voici : comme l'OP, je voulais une image dans mon README Github 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 photo rendue réelle ! Et le lien est exactement celui donné par Google Storage !

Github camo - Images anonymes

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

Je suis sûr qu'il y a un moyen plus facile, cependant, il suffit de visiter votre point de terminaison URL donné et de copier l'URL longue. Détails :

Instructions

1. Visitez 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 (la page "Object Details" s'affiche).
3. Copiez les pâtes de cet URL (celui qui commence avec https pas gs ) dans un nouvel onglet/fenêtre du navigateur
4. Copiez la nouvelle URL générée - elle devrait être plus longue - de votre nouvel onglet/fenêtre de navigation dans votre fichier README de Github.

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

Answer 4

Tout d'abord, créez un répertoire (dossier) dans le Root de votre repo local qui contiendra les éléments suivants screenshots que vous voulez ajouter. Appelons le nom de ce répertoire screenshots . Placez les images (JPEG, PNG, GIF,` etc) que vous voulez ajouter dans ce répertoire.

Capture d'écran de l'espace de travail d'Android Studio

Deuxièmement, vous devez ajouter un lien vers chaque image dans votre fichier README. Ainsi, si j'ai des images nommées 1_ArtistsActivity.png et 2_AlbumsActivity.png dans mon répertoire de captures d'écran, je vais ajouter leurs liens comme suit :

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

Si vous voulez que chaque capture d'écran soit sur une ligne séparée, écrivez leurs liens sur des lignes séparées. Cependant, il est préférable d'écrire tous les liens sur une seule ligne, en les séparant uniquement par un espace. Cela n'a peut-être pas l'air très beau, mais en faisant cela, GitHub les organise automatiquement pour vous.

Enfin, livrez vos changements et poussez-les !

Answer 5

Pour moi, le meilleur moyen est -

1. Créez un nouveau problème avec ce dépôt sur Github, puis téléchargez le fichier au format GIF. Pour convertir les fichiers vidéo au format GIF, vous pouvez utiliser ce site Web. http://www.online-convert.com/
2. Soumettez le numéro nouvellement créé.
3. Copiez l'adresse du fichier téléchargé
4. Enfin dans votre fichier README mettez 

J'espère que cela vous aidera.