在GitHub的README.md文件中，图片无法显示

Question

在GitHub的README.md文件中，图片无法显示

68

我正在尝试使用以下的 Markdown 语法向我的仓库的 README.md 添加一张图片：

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

然而，当我访问我的代码库时，图片并没有显示出来。相反，链接到图片的地址显示了出来。点击该链接会在新窗口中打开图片。

我也尝试使用相对路径：

![ScreenShot](screenshot.jpg)

但是这会导致页面找不到错误。

在 README.md 中显示图片的正确 Markdown 是什么？

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)

- AnonGeek

可能是在GitHub上将图像添加到README.md的重复问题。 - ashokramcse

突然间，“问题”又重新出现了。先前可以正常渲染的图片现在无法显示。不仅是我的仓库，其他仓库也有这个问题。怎么回事？ - lifebalance

没关系！它们现在似乎可以工作了...我甚至在另一个仓库上提出了这个问题！https://github.com/arshadkazmi42/first-issues/issues/87 - lifebalance

https://stackoverflow.com/a/77319849/4393351 - undefined

14个回答

42

你真的应该使用相对URL。这样它们对于私人存储库也能更好地工作。

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

假设您的存储库中在screenshots文件夹中有latest.png。

~B

- bosky101

1

我同意，最好是相对于存储库中的图像。 :-) - Lee Englestone

1

特别是Github偶尔会更改原始文件路径，尤其是最近从“http://github.com/user-name/repo-name/raw/”更改为“https://raw.githubusercontent.com/user-name/repo-name/”。使用相对路径，这样您就不需要经常检查存储库图像链接是否损坏。 - Yo Hsiao

如果您想通过提供一个例如200*200像素的图像来支持视网膜屏幕，您也可以使用<img src="../<branch>/screenshot.jpg?raw=true" width="100" height="100" />。 - electronix384128

我该如何在与GitHub公共页面相关的私有存储库中显示图像？ - Nicholas Allio

18

为了让相对URL与图片一起工作，请将其包含在段落标签内。

我曾经面临这个问题，特别是在处理单张图片时。

例如：

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

- Rakesh Yembaram

8

对之前回答的补充...

当下面这行代码出现时，图片无法显示：

![ScreenShot](/image.png)

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

希望这可以节省某些人的时间！

- Josh Mitton

这对我也是一样的。请确保在指定图像的代码片段上方有一个空行。 - ChamodyaDias

3

我觉得我需要更新一下这个内容，因为我自己也曾经在这方面遇到过困难。我将图片上传到了GitHub的一个仓库中，然后使用每张图片的原始url将其导入到我的markdown文件中。要获取原始url，请单击GitHub上特定图像的链接，以便进入该特定图像的页面。在照片右上角有两个按钮：“下载”和“历史记录”。如果你点击“下载”，它会带你到占据整个屏幕的图片的原始url。复制该url，然后像这样将其粘贴到您的markdown文件中：

！[图片描述或alt文本]（https：//raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg）

按钮以前是写"Raw"而不是"Download"，希望这能帮助人们找到它。

- Amanda

1

检查文件扩展名，因为.png和.PNG不同。

在指定文件路径时，请使用/而不是\。

- Pragato Bhattacharjee

没有看到您使用的标记，也不知道图像的真实路径，很难提供帮助。您能提供一下吗？ - Julio Marchi

1

请确保检查文件扩展名的大小写。它们必须匹配（无论是大写还是小写）。如果您在根目录中有my_image.PNG，并且您将![screenshot](/my_image.png)添加到README文件中，则不起作用。由于某种原因，Windows有时会将文件扩展名大写。不幸的是，Git不识别扩展名大小写，因此如果您尝试通过更改文件名来修复它，您将无法提交更改到存储库，因为Git将认为一切都是最新的。因此，您必须更新README.md或执行一些解决方法，例如将文件移出目录，进行提交，然后编辑文件名，然后将其移回并再次提交。

- Samwise Ganges

1

这可能与以前的答案无关。我和楼主有同样的问题-我被引导到这里，但是它没有帮助我。然而，我希望我能帮助解决这个问题 - 因为它涵盖了图片在README.md文件中为什么无法渲染的可能性。

我遇到的问题是文件名README.md被写作readME 它不仅缺少.md，而且写法也不同。

显然，我们不应该重命名README.md文件。它必须是该文件的原始名称，才能在github的README.md页面上渲染您想上传的图像或gif。希望这可以帮助在罕见情况下像我一样的人。

- Gel

0

顺便提一下，使用reStructuredText时，请使用：

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

- brianray

0

当图片导入的行上方有任何HTML标签时，它就无法正常工作。您可以尝试删除HTML代码或添加一些空白行以便在Readme中显示图片。

- Hardik Kamboj

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nulltoken · Accepted Answer

更新的内容

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

这意味着你的代码![ScreenShot](screenshot.jpg)现在可以完美地工作了。

正如@Brad所指出的那样，这也可能简化了两个分支中图片不同但名称相同的情况。在这种情况下，切换分支将动态切换渲染视图中的图像，因此无需更改Readme内容。

博客帖子公告
帮助文章

在GitHub不支持相对链接时的先前答案

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

这意味着正确的markdown应该是以下内容：

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

在 Github 的 .md 文件中使用此代码会显示以下图片 ;-)

ScreenShot

根据您的评论更新

这个官方文件是哪里可以找到的...我在任何地方都找不到

这种 URL 格式是 GitHub 站点的一个未记录的功能。这意味着它以后可能会更改。如果发生这种情况，为了“重新发现”新格式，请在显示图像时单击 Raw 按钮。这将在浏览器中“打开”图像。然后复制 URL 就好啦！

raw

注：虽然该存储库不再托管在 GitHub 上，但我已经更新了 URL 以反映新的GitHub 政策关于用户内容。