Comment ajouter une capture d'écran à READMEs dans le référentiel github?

Même s'il y a déjà une réponse acceptée, Je voudrais ajouter une autre façon de télécharger des images dans readme sur GitHub.

• vous devez créer un problème dans votre repo
• Faites glisser et déposez dans la zone de commentaire votre image
• Après que le lien pour l'image soit généré, insérez-le dans votre readme

Plus de détails, vous pouvez trouver ici

J'ai trouvé que le chemin vers l'image dans mon repo ne suffisait pas, j'ai dû créer un lien vers l'image sur le sous-domaine raw.github.com.

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)

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

Si votre fichier est dans le référentiel

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

Si votre fichier se trouve dans une autre url externe

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

1. Téléchargez votre image sur postimage.org
2. Obtenir GitHub Markdown url
3. Insérer dans votre ReadMe

La syntaxe markdown pour afficher les images est en effet:

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

MAIS: Comment fournir à l' url ?

• Vous ne voulez probablement pas encombrer votre repo avec des captures d'écran, ils n'ont rien à voir avec le code
• Vous ne voudrez peut-être pas non plus faire face aux tracas de rendre votre image disponible sur le web... (télécharger vers un serveur... ).

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

1. créez un problème dans 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 markdown que github vient de créer pour vous pour afficher votre image
4. coller sur votre readme (ou où vous voulez)

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

Ajoutez ceci à README

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

Démarque: ![Screenshot](http://url/to/img.png)

• Créer une question concernant l'ajout d'images
• Ajouter l'image par glisser-déposer ou par le sélecteur de fichier

• puis copiez la source de l'image

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

Fait!

Vous pouvez également utiliser un site d'hébergement d'images comme imgur et obtenir son url et l'ajouter dans votre README.md fichier ou vous pouvez utiliser un hébergement de fichiers statiques trop.

Exemple de question

Beaucoup plus simple que d'ajouter une URL Il suffit de télécharger une image dans le même référentiel, comme:

![Screenshot](screenshot.png)

Méthode 1->Markdown façon

![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 voulez 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 dépôt local qui contiendra le screenshots que vous 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 De L'Espace De Travail Android Studio

Deuxièmement, vous devez ajouter un lien vers chaque image dans votre README. Donc, si j'ai des images nommées 1_ArtistsActivity.png et 2_AlbumsActivity.png dans mon répertoire de captures d'écran, j'ajouterai 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 sur une ligne séparée, écrire leurs liens sur des lignes séparées. Cependant, il est préférable d'écrire tous les liens dans une ligne, séparés par un espace seulement. Il pourrait en fait ne pas sembler trop bon, mais ce faisant, GitHub les arrange automatiquement pour vous.

Enfin, validez vos modifications et poussez-les!

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 dans gif format.To convertir des fichiers vidéo au format gif vous pouvez utiliser ce site 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 put ![Démo] (adresse copiée)

J'espère que cela aidera .

Avec les images situées dans le répertoire /screen-shots. L'extérieur <div> permet de positionner les images. Le remplissage 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>