L'image ne s'affiche pas dans le fichier README.md sur GitHub

Question

J'essaie d'ajouter une image à l README.md dans mon dépôt en utilisant le markdown ci-dessous :

![ScreenShot](https://github.com/i-saumitra/Voice-controlled-MP3-Player/blob/master/screenshot.jpg)

Mais l'image ne s'affiche pas lorsque je visite mon référentiel. C'est le lien vers l'image qui s'affiche. En cliquant sur le lien, l'image s'ouvre dans une nouvelle fenêtre.

J'ai également essayé d'utiliser un chemin relatif :

![ScreenShot](screenshot.jpg)

Mais cela donne une erreur de page non trouvée.

Quel est le bon langage de balisage pour afficher une image dans le texte suivant README.md

Les deux sites README.md et le fichier image sont dans le même chemin/répertoire.

Quelle est la manière correcte d'afficher une image dans le fichier README.md de github ?

Le contenu complet du fichier README.md est le suivant :

Voice-controlled-MP3-Player
===========================

A MP3 player which accept voice command like PLAY, PAUSE, FORWARD, etc. Using C# and Microsoft Speech API.

![ScreenShot](https://github.com/i-saumitra/Voice-controlled-MP3-Player/blob/master/screenshot.jpg)

Answer 1

Contenu actualisé

Depuis le 30 janvier 2013, GitHub prend en charge les liens relatifs dans les documents de balisage.

Cela signifie que votre code ![ScreenShot](screenshot.jpg) fonctionne désormais sans problème.

Comme l'a souligné @Brad, cela peut également faciliter un scénario où les images sont différentes dans deux branches, mais portent la même chose. Dans ce cas, en passant d'une branche à l'autre, on changerait dynamiquement l'image dans la vue rendue, sans qu'il soit nécessaire de modifier le contenu du Readme.

• Annonce d'un billet de blog
• Article d'aide

Réponse précédente lorsque GitHub ne prenait pas en charge les liens relatifs

Vous devez utiliser le format url brut. Dans votre cas, ce serait https://raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg

Cela signifie que la démarque correcte serait la suivante

![ScreenShot](https://raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg)

En l'utilisant dans un .md sur github affichera l'image suivante ;-)

Mise à jour suite à votre commentaire

où est-ce que c'est officiellement documenté que nous devons utiliser du brut... je n'ai pas pu le trouver n'importe où

Ce format d'URL est une caractéristique non documentée du site GitHub. Cela signifie qu'il pourrait changer ultérieurement. Si cela se produit, pour "redécouvrir" le nouveau format, cliquez sur l'icône Brut lors de l'affichage d'une image. Cela va "ouvrir" l'image dans votre navigateur. Copiez l'URL et voilà !

Note : Bien que le référentiel ne soit plus hébergé sur GitHub, j'ai mis à jour les urls pour refléter le nouveau Politique de GitHub concernant le contenu des utilisateurs

Answer 2

Vous devriez vraiment utiliser des urls relatives. De cette façon, elles fonctionneront mieux pour les dépôts privés également.

![ScreenShot](/screenshots/latest.png)

en supposant que votre repo a latest.png dans le dossier screenshots.

~B

Answer 3

Pour que les URL relatives fonctionnent avec les images, il faut les placer à l'intérieur de la balise paragraphe.

J'étais confronté à ce problème, surtout lorsque je travaillais avec une seule image.

Ejemplo:

<p>
    <img src="relativePath/file.png" width="220" height="240" />
</p>

Answer 4

Une extension aux réponses précédentes...

L'image ne s'affichait pas pour moi lorsque la ligne :

![ScreenShot](/image.png)

était juste en dessous d'un <h2></h2> et je devais ajouter une ligne vide entre elles.

J'espère que cela fera gagner du temps à quelqu'un !

Answer 5

J'ai pensé que je mettrais cela à jour pour 2019 car j'ai eu du mal à comprendre cela pour moi-même. J'ai téléchargé mes images dans un repo sur GitHub, puis j'ai utilisé l'url brute de l'image pour l'importer dans mon fichier markdown. Pour obtenir l'url brute, cliquez sur le lien de l'image spécifique dans GitHub afin d'être sur la page de cette image spécifique. En haut à droite de la photo, il y a deux boutons, "Télécharger" et "Historique". Si vous cliquez sur "Télécharger", vous accédez à l'url brute avec la photo en plein écran. Copiez cette url, puis collez-la comme ceci dans votre fichier markdown :

![image description or alt text](https://raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg)

Le bouton indiquait "Raw" et non "Download". J'espère que cela aidera les gens à le trouver.