图像未显示在GitHub上的README.md中

Question

我正在尝试使用以下标记向我的存储库中的 README.md 添加图片：

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

但是当我访问我的存储库时，图像没有显示。 而是显示图像的链接。单击该链接将在新窗口中打开图像。

我也尝试过使用相对路径：

![ScreenShot](screenshot.jpg)

但这会给页面找不到错误。

在 README.md

中显示图片的正确降价是什么

README.md 和图像文件位于同一路径/目录中。

在github README.md中显示图像的正确方法是什么？

README.md文件的完整内容如下：

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

更新内容

自2013年1月30日起，GitHub现在支持标记文档中的相对链接。

这意味着您的代码![ScreenShot](screenshot.jpg)现在可以完美运行。

正如@Brad指出的那样，这也可以缓解图像在两个分支中不同的情况，但具有相同的效果。在这种情况下，从一个分支切换到另一个分支，将动态切换渲染视图中的图像，因此无需对Readme内容进行任何更改。

• 的 Blog post announcement
• 的 Help article

GitHub不支持相关链接时的上一个答案

您必须使用原始网址格式。在你的情况下，https://raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg

这意味着正确的降价将是以下

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

在github上的.md文件中使用它将显示以下图片; - ）

在您的评论后更新

  

这个官方文件在哪里，我们必须使用原始...我无法在任何地方找到它

此URL格式是GitHub站点的未记录功能。这意味着它可能会在以后发生变化。如果发生这种情况，为了“重新发现”新格式，请在显示图像时单击原始按钮。这将在您的浏览器中“打开”图像。复制网址和Voilà！

注意：虽然存储库已不再托管在GitHub上，但我已更新网址以反映有关用户内容的新 GitHub policy

Answer 2

你真的应该使用相对网址。这样他们也可以更好地用于私人回购。

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

假设您的repo在screenshots文件夹中有latest.png。

〜乙

Answer 3

这可能与先前的答案无关。我和OP有同样的问题 - 我被引导到这里，它没有帮助我。我希望我能帮助为这个问题添加亮点 - 因为它涵盖了为什么图像无法在README.md文件中呈现的可能性。

我遇到的issue是文件名README.md文件写为readME

不仅缺少.md，它的写法也不同。

显然，我们不应重命名README.md文件。它必须是该文件的原始名称才能在github README.md页面上呈现您要上传的图像或GIF。希望这能帮助某人，在极少数情况下，就像我一样。

Answer 4

先前答案的扩展...

以下行将不会为我显示图片：

![ScreenShot](/image.png)

位于<h2></h2>行的正下方，我需要在它们之间添加一个空行。

希望这可以节省一些时间！

Answer 5

附注，使用reStructuredText时使用：

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

Answer 6

我认为我将在2019年对此进行更新，因为我自己无法确定这一点。我将图像上传到GitHub上的仓库中，然后使用图像的原始url将其导入到我的markdown文件中。要获取原始URL，请单击GitHub中的特定图像链接，以便您位于该特定图像的页面上。在照片的右上方，有两个按钮，“下载”和“历史记录”。如果单击“下载”，它将带您到原始URL，并且图片占据全屏。复制该网址，然后将其粘贴到您的markdown文件中：

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

该按钮以前是说“原始”而不是“下载”，因此希望这可以帮助人们找到它。

Answer 7

我必须添加<br>来返回一行，以便该图像在我的身上显示。这一发现的灵感来自于该线程中的注释，该注释在标签后留了空白行。

Answer 8

我已经使用“复制路径”进行了测试，在某些地方这有效，而在其他地方却没有。

如果没有，我会复制永久链接并使用它。