63

我正在尝试使用下面的降价将图像添加到我的存储库中的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)
4

11 回答 11

86

更新内容

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

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

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

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

您必须使用原始 url 格式。在你的情况下，这将是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)

.md在 github 上的文件中使用它会显示以下图片；-)

截屏

根据您的评论更新

这个官方记录在哪里我们必须使用原始文件...我在任何地方都找不到

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

生的

注意：虽然存储库不再托管在 GitHub 上，但我更新了 url 以反映有关用户内容的新GitHub 政策

于 2012-08-11T18:16:43.100 回答
37

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

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

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

~B

于 2013-10-08T07:11:40.793 回答
15

要使相对 URL 与图像一起使用，请将其包装在段落标记中。

我遇到了这个问题，尤其是在使用单个图像时。

例子：

<p>
    <img src="relativePath/file.png" width="220" height="240" />
</p>
于 2017-11-27T09:57:00.253 回答
4

对先前答案的扩展...

当行时，图像不会显示给我：

![ScreenShot](/image.png)

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

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

于 2019-11-30T19:09:20.527 回答
3

以为我会在 2019 年更新此内容，因为我自己无法解决这个问题。我将图像上传到 GitHub 上的存储库，然后使用图像的原始 url 将其导入我的 markdown 文件。要获取原始 url，请单击 GitHub 中的特定图像链接，以便您位于该特定图像的页面上。照片的右上角有两个按钮，“下载”和“历史记录”。如果您单击“下载”，它会将您带到该原始 url，图片占据全屏。复制该网址，然后将其粘贴到您的降价文件中：

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

该按钮用于说“原始”而不是“下载”，所以我希望这可以帮助人们找到它。

于 2019-12-28T21:15:43.077 回答
1

这可能与以前的答案无关。我和 OP 有同样的问题 - 我被指引到这里，但对我没有帮助。不过，我希望我可以帮助解决这个问题——因为它涵盖了为什么图像不会在README.md文件中呈现的可能性。

我遇到的issue是文件名README.mdfile写成readME

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

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

于 2018-01-18T19:09:24.893 回答
1

检查文件扩展名，因为.png与.PNG.

在指定文件路径时也使用/代替。\

于 2021-08-17T18:10:17.837 回答
0

旁注，使用 reStructuredText 时使用：

.. image:: /screenshots/latest.png?raw=true
于 2016-05-04T15:47:43.217 回答
0

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

在此处输入图像描述

在没有的情况下，我复制了永久链接并改用它。

于 2021-04-02T12:35:10.953 回答
0

当正在导入图像的行上方有任何 html 标记时，它不起作用。您可以尝试删除 html 代码或添加一些空白行以在自述文件中显示图像。

于 2022-02-09T00:32:58.973 回答
-1

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

于 2020-10-01T12:06:09.120 回答