Ajouter des images à README.md sur GitHub

Récemment, j’ai rejoint GitHub . J’y ai hébergé des projets.

Je dois 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, ce sont des liens qui me disent “héberger des images sur le Web et spécifier le chemin de l’image dans le fichier README.md”.

Est-il possible de le faire sans héberger les images sur des services d’hébergement Web tiers?

Essayez ce démarquage:

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

Je pense que vous pouvez vous connecter 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) 

Edit: vient de remarquer un commentaire sur un article qui suggère d’utiliser des pages Gh. En outre, les liens relatifs peuvent être une meilleure idée que les URL absolues que j’ai publiées ci-dessus.

Vous pouvez également utiliser des chemins relatifs comme

 ![Alt text](relative/path/to/img.jpg?raw=true "Title") 
  • Vous pouvez créer un nouveau numéro
  • télécharger des images (glisser-déposer)
  • Copiez l’URL des images et copiez la page de l’URL de l’image dans votre fichier README.md.

Voici une vidéo détaillée de youTube qui explique ceci en détail:

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

C’est beaucoup plus simple que ça.

Il vous suffit de télécharger votre image sur la racine du référentiel et de créer un lien vers le nom du fichier sans aucun chemin, comme ceci:

 ![Screenshot](screenshot.png) 

Vous pouvez également append des images avec des balises HTML simples:

 

accessibility text

Beaucoup de solutions affiché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 dans le suivi des problèmes est un piratage. Cela crée du désordre et confond les utilisateurs. Il est difficile de migrer cette solution vers un fork ou un GitHub.
  • L’utilisation de la twig gh-pages rend les URL fragiles. Une autre personne travaillant sur le projet qui gère la page gh peut ne pas savoir que quelque chose d’extérieur dépend du chemin de ces images. La twig gh-pages a un comportement particulier sur GitHub qui n’est pas nécessaire pour héberger des images CDN.
  • Le suivi des actifs dans le contrôle de version est une bonne chose. Au fur et à mesure que le projet se développe et change, la gestion et le suivi des modifications par plusieurs utilisateurs sont plus durables.
  • Si une image s’applique à une révision spécifique du logiciel, il peut être préférable de lier une image immuable. De cette façon, si l’image est mise à jour ultérieurement pour refléter les modifications apscopes au logiciel, toute personne lisant ce fichier readme trouvera la bonne image.

Ma solution préférée, inspirée de cet esprit , consiste à utiliser une twig de ressources avec des 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. 

Construisez un “permalien” à cette révision de l’image et enveloppez-le 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 twig des actifs, utilisez les assets à la place du sha:

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

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

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

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 image. URI de l’image

Exemple:

 ![stack Overflow](http://lmsotfy.com/so.png) 

Cela ressemblera à ceci:

image de débordement de pile par alamin

  • Créer un problème concernant l’ajout d’images
  • Ajouter l’image par glisser-déposer ou par sélecteur de fichier
  • Ensuite, copiez la source d’image

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

Terminé!

Sinon, vous pouvez utiliser un site d’hébergement d’images tel imgur et obtenir son URL et l’append dans votre fichier README.md ou vous pouvez également utiliser un hébergement de fichiers statique.

Exemple de problème

Ajoutez simplement une à votre README.md avec src relative à votre référentiel. Si vous n’utilisez pas src, assurez-vous que le serveur prend en charge CORS.

Cela fonctionne parce que GitHub supporte inline-html

 My cool logo # My cool project and above is the logo of it 

Observe ici

Je dois inclure des images dans mon fichier README. Je ne sais pas comment faire ça.

J’ai créé un petit assistant qui vous permet de créer et de personnaliser des galeries d’images simples pour le fichier readme de votre repository GitHub: Voir ReadmeGalleryCreatorForGitHub .

L’assistant tire parti du fait que GitHub permet aux balises img de se produire dans le README.md . En outre, l’assistant utilise l’astuce populaire de téléchargement d’images sur GitHub en les faisant glisser dans la zone de problème (comme cela a déjà été mentionné dans l’une des réponses de ce sujet).

Dans mon cas, j’utilise imgur et utilise le lien direct de cette façon.

 ![img](http://i.imgur.com/yourfilename.png) 

Je héberge généralement l’image sur le site, cela peut créer un lien vers n’importe quelle image hébergée. Il suffit de lancer ceci dans le readme. Fonctionne pour les fichiers .rst , pas sûr de .md

 .. image:: https://url/path/to/image :height: 100px :width: 200 px :scale: 50 % 

Vous pouvez créer un lien vers des images de votre projet à partir de README.md (ou en externe) en utilisant le lien github CDN alternatif.

L’URL ressemblera à ceci:

 https://cdn.rawgit.com////// 

J’ai une image SVG dans mon projet et lorsque je la référence dans la documentation de mon projet Python, elle ne s’affiche pas.

Lien du projet

Voici le lien du projet vers le fichier (ne s’affiche pas comme une image):

https://github.com/jongracecox/anybadge/blob/master/examples/awesomeness.svg

Exemple d’image intégrée: image

Lien brut

Voici le lien RAW vers le fichier (ne s’affiche toujours pas en tant qu’image):

https://raw.githubusercontent.com/jongracecox/anybadge/master/examples/awesomeness.svg

Exemple d’image intégrée: image

Lien CDN

En utilisant le lien CDN, je peux créer un lien vers le fichier en utilisant (rend en tant qu’image):

https://cdn.rawgit.com/jongracecox/anybadge/master/examples/awesomeness.svg

Exemple d’image intégrée: image

Voici comment je peux utiliser les images de mon projet dans mon fichier README.md et dans mon projet PyPi reStructredText doucmentation ( ici )

J’ai résolu ce problème. Il vous suffit de vous référer au fichier readme de quelqu’un d’autre.

Au début, vous devez télécharger un fichier image dans la bibliothèque de codes github! Puis, référence directe à l’adresse du fichier image.

entrer la description de l'image ici

entrer la description de l'image ici

Dans mon cas, je voulais montrer un écran imprimé sur Github mais aussi sur NPM . Même si l’utilisation du chemin relatif fonctionnait dans Github , cela ne fonctionnait pas en dehors. Fondamentalement, même si je transmettais aussi mon projet à NPM (qui utilise simplement le même readme.md , l’image n’a jamais été readme.md .

J’ai essayé quelques façons, à la fin c’est ce qui a fonctionné pour moi:

![Preview](https://raw.githubusercontent.com/username/project/master/image-path/image.png)

Je vois maintenant mon image correctement sur NPM ou ailleurs que je pourrais publier mon paquet.

Si vous avez besoin de télécharger des images pour la documentation, une approche intéressante consiste à utiliser git-lfs . En supposant que vous avez installé les git-lfs suivez ces étapes:

  1. Intialize git lfs pour chaque type d’image:

     git lfs *.png git lfs *.svg git lfs *.gif git lfs *.jpg git lfs *.jpeg 
  2. Créez un dossier qui sera utilisé comme emplacement d’image, par exemple. doc . Sur les systèmes basés sur GNU / Linux et Unix, cela peut être fait via:

     cd project_folder mkdir doc git add doc 
  3. Copier coller les images dans le dossier doc. Ensuite, ajoutez-les via la commande git add .

  4. S’engager et pousser.

  5. Les images sont publiquement disponibles dans l’URL suivante:

    https://media.githubusercontent.com/media/ ^ github_username ^ / ^ repo ^ / ^ branch ^ / ^ emplacement_image dans le repository ^

Où: * ^github_username^ est le nom d’utilisateur dans github (vous pouvez le trouver dans la page de profil) * ^repo_name^ est le nom du référentiel * ^branch^ est la twig du référentiel dans lequel l’image est téléchargée * ^image_location in the repo^ l’emplacement, y compris le dossier dans lequel l’image est stockée.

Aussi, vous pouvez d’abord télécharger l’image puis visiter l’emplacement dans votre page github de projets et naviguer jusqu’à ce que vous trouviez l’image puis appuyez sur le bouton de download , puis copiez-collez l’URL de la barre d’adresse du navigateur.

Regardez ceci de mon projet comme référence.

Ensuite, vous pouvez utiliser l’URL pour les inclure en utilisant la syntaxe markdown mentionnée ci-dessus:

 ![some alternate text that describes the image](^github generated url from git lfs^) 

Par exemple, supposons que nous utilisions cette photo. Ensuite, vous pouvez utiliser la syntaxe de démarquage:

 ![In what order to comstack the files](https://media.githubusercontent.com/media/pc-magas/myFirstEnclave/master/doc/SGX%20Comstack%20workflow.png) 

DERNIER

Les wikis peuvent afficher des images PNG, JPEG ou GIF

Maintenant, vous pouvez utiliser:

 [[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]] 

-OU-

Suivez ces étapes:

  1. Sur GitHub, accédez à la page principale du référentiel.

  2. Sous le nom de votre référentiel, cliquez sur Wiki.

  3. À l’aide de la barre latérale du wiki, accédez à la page que vous souhaitez modifier, puis cliquez sur Modifier.

  4. Sur la barre d’outils du wiki, cliquez sur Image .

  5. Dans la boîte de dialog “Insérer une image”, tapez l’URL de l’image et le texte alt (utilisé par les moteurs de recherche et les lecteurs d’écran).
  6. Cliquez sur OK.

Référez-vous à Docs .

Nous pouvons le faire simplement,

  • créer un nouveau numéro sur GitHub
  • faites glisser et déposez des images sur le corps div de Issue

au bout de quelques secondes, un lien sera généré. Maintenant, copiez l’URL du lien ou de l’image et utilisez-la sur toute plate-forme prise en charge.

JUSTE CE TRAVAIL !!

Prenez soin de votre nom de fichier en majuscule et insérez le fichier PNG inroot, et créez un lien vers le nom du fichier sans aucun chemin:

 ![Screenshot](screenshot.png) 

Je ne fais que prolonger ou append un exemple à la réponse déjà acceptée.

Une fois que vous avez mis l’image sur votre repository Github.

Alors:

  • Ouvrez le repository Github correspondant sur votre navigateur.
  • Naviguer vers le fichier d’image cible Ouvrez simplement l’image dans un nouvel onglet. Ouvrir l'image dans un nouvel onglet
  • Copier l’URL Copiez l'URL de l'onglet du navigateur
  • Et enfin, insérez l’URL dans le modèle suivant ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

Sur mon cas c’est

![In a single picture](https://raw.githubusercontent.com/shadmazumder/Xcode/master/InOnePicture.png)

  • shadmazumder est mon username
  • Xcode est le projectname du projectname
  • master est la branch
  • InOnePicture.png est l’ image , Dans mon cas, InOnePicture.png est dans le répertoire racine.