Comment ajouter des images au fichier README.md sur GitHub ?

Question

Récemment, j'ai rejoint GitHub . J'y ai hébergé quelques projets.

J'ai besoin d'inclure des images dans mon fichier README. Je ne sais pas comment faire.

J'ai fait des recherches à ce sujet, mais tout ce que j'ai obtenu, ce sont des liens qui me disent "d'héberger les images sur le web et de spécifier le chemin de l'image dans le fichier README.md".

Existe-t-il un moyen de faire cela sans héberger les images sur des services d'hébergement Web tiers ?

Answer 1

Je ne fais qu'étendre ou ajouter un exemple à la réponse déjà acceptée.

Une fois que vous avez mis l'image sur votre repo Github.

Ensuite :

• Ouvrez le repo Github correspondant sur votre navigateur.
• Naviguez vers le fichier image cible Puis ouvrez l'image dans un nouvel onglet.
• Copier l'url
• Et enfin, insérer l'url selon le modèle suivant ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

Dans mon cas, c'est

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

Où

• shadmazumder est mon username
• Xcode est le projectname
• master est le branch
• InOnePicture.png est le image Sur mon cas InOnePicture.png se trouve dans le répertoire racine.

Answer 2

Dans mon cas, je voulais montrer un écran d'impression sur Github mais aussi sur NPM . Même si l'utilisation du chemin relatif fonctionnait dans Github ça ne marchait pas en dehors de ça. En gros, même si je poussais mon projet vers NPM également (qui utilise simplement le même readme.md l'image ne s'est jamais affichée.

J'ai essayé plusieurs façons, mais à 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 n'importe où ailleurs où je pourrais publier mon paquet.

Answer 3

J'ai trouvé une autre solution, mais assez différente, que je vais vous expliquer.

En fait, j'ai utilisé la balise pour afficher l'image, mais je voulais aller sur une autre page lorsque l'on cliquait sur l'image et voici comment j'ai fait.

<a href="the-url-you-want-to-go-when-image-is-clicked.com" />
<img src="image-source-url-location.com" />

Si vous les mettez l'une à côté de l'autre, séparées par une nouvelle ligne, je suppose que lorsque vous cliquez sur l'image, elle va vers la balise qui a le href vers l'autre site que vous voulez rediriger.

Answer 4

DERNIÈRES NOUVELLES

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]]

-OR-

Suivez les étapes suivantes :

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. Dans la barre latérale du wiki, naviguez jusqu'à la page que vous souhaitez modifier, puis cliquez sur Modifier.

4. Dans la barre d'outils wiki, cliquez sur Image .

5. Dans la boîte de dialogue "Insérer une image", saisissez l'URL de l'image et le texte alt (qui est utilisé par les moteurs de recherche et les lecteurs d'écran).

6. Cliquez sur OK.

Consultez le site Docs .

Answer 5

Envisagez d'utiliser un table si vous ajoutez plusieurs captures d'écran et souhaitez les aligner à l'aide de données tabulaires pour une meilleure accessibilité, comme indiqué ici :

Si votre analyseur markdown le supporte, vous pouvez également ajouter l'option role="presentation" WIA-ARIA à l'élément TABLE et omettre l'attribut th tags.