web-dev-qa-db-fra.com

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

J'essaie d'ajouter une image à README.md dans mon référentiel en utilisant 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. Au lieu de cela, le lien vers l'image s'affiche. Cliquez sur le lien pour ouvrir l'image dans une nouvelle fenêtre.

J'ai aussi essayé d'utiliser le chemin relatif:

![ScreenShot](screenshot.jpg)

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

Quel est le bon démarquage pour afficher l'image dans README.md

Le fichier README.md et le fichier image se trouvent dans le même chemin/répertoire.

Quelle est la bonne façon d’afficher une image dans github README.md?

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)
38
AnonGeek

Contenu mis à jour

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

Cela signifie que votre code ![ScreenShot](screenshot.jpg) fonctionnerait maintenant parfaitement.

Comme @Brad l'a souligné, cela peut également faciliter un scénario dans lequel les images sont différentes dans deux branches, mais portent la même chose. Dans ce cas, le passage d'une branche à une autre modifierait dynamiquement l'image dans la vue rendue, sans nécessiter de modification du contenu du fichier Lisez-moi.

Réponse précédente quand GitHub ne supportait pas 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 le démarquage correct serait le suivant

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

L’utiliser dans un fichier .md sur github affichera l’image suivante ;-)

ScreenShot

Mise à jour suite à votre commentaire

où est-il officiellement documenté que nous devons utiliser des matières premières ... Je ne les ai trouvées nulle part

Ce format d'URL est une fonctionnalité non documentée du site GitHub. Cela signifie que cela pourrait changer plus tard. Si cela se produit, pour "redécouvrir" le nouveau format, cliquez sur le bouton Raw lors de l'affichage d'une image. Cela "ouvrira" l'image dans votre navigateur. Copiez l'URL et Voilà!

raw

Remarque: Bien que le référentiel ne soit plus hébergé sur GitHub, j'ai mis à jour les URL pour refléter la nouvelle politique GitHub concernant le contenu de l'utilisateur.

58
nulltoken

Vous devriez vraiment utiliser des URL relatives. De cette façon, ils fonctionneront mieux pour les pensions privées.

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

en supposant que votre dépôt a last.png dans le dossier screenshots.

~ B

28
bosky101

Pour que les URL relatives fonctionnent avec des images, placez-les dans la balise de paragraphe.

Je faisais face au problème, surtout lorsque je travaillais avec une seule image.

Exemple: 

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

Remarque secondaire, lorsque vous utilisez reStructuredText, utilisez:

.. image:: /screenshots/latest.png?raw=true
0
brianray

Cela peut ne pas être pertinent pour les réponses précédentes. J'ai la même question que le PO - j'ai été dirigé ici et il ne m'a pas aidé. J'espère cependant pouvoir apporter une lumière supplémentaire à cette question, car elle couvre les possibilités de ne pas restituer les images dans le fichier README.md.

La issue que j'ai rencontrée est que le nom du fichier README.md fichier est écrit sous la forme readME

Non seulement son .md manquant, il est également écrit différemment. 

Apparemment, nous ne devrions pas renommer le fichier README.md. Il doit s'agir du nom d'origine de ce fichier pour pouvoir restituer les images ou les gifs que vous souhaitez télécharger sur la page github README.md. J'espère que cela aide quelqu'un, dans de rares cas, comme je l'ai fait.

0
Gel Sisaed