图片未显示在 GitHub 上的 README.md 中
Posted
技术标签:
【中文标题】图片未显示在 GitHub 上的 README.md 中【英文标题】：Image not showing up in README.md on GitHub 【发布时间】：2012-08-08 14:12:00 【问题描述】：我正在尝试使用下面的降价将图像添加到我的存储库中的 README.md：
但是当我访问我的存储库时，图像没有显示。 而是显示图像的链接。点击链接将在新窗口中打开图片。
我也尝试过使用相对路径：
但这会导致页面未找到错误。
在 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.
【问题讨论】：
Add images to README.md on GitHub的可能重复 突然间，这个“问题”又出现了。之前渲染的图像不显示。这不仅在我的回购中，在其他回购中也是如此。什么给了？ 没关系！他们现在似乎工作了......我什至在另一个回购中提出了问题！ github.com/arshadkazmi42/first-issues/issues/87 【参考方案1】：更新内容
自 2013 年 1 月 30 日起，GitHub 现在支持标记文档中的相对链接。
这意味着您的代码  现在可以完美运行。
正如@Brad 所指出的，这也可以缓解两个分支中的图像不同但具有相同的情况。在这种情况下，从一个分支切换到另一个分支会动态切换渲染视图中的图像，因此不需要对自述文件内容进行任何更改。
Blog post announcement Help articleGitHub 不支持相对链接时的上一个答案
您必须使用原始 url 格式。你的情况是https://raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg
这意味着正确的降价将是以下
在 github 上的 .mdfile 中使用它会显示以下图片 ;-)
根据您的评论更新
这个官方记录在哪里我们必须使用 raw...我在任何地方都找不到它
此 URL 格式是 GitHub 站点的未记录功能。这意味着它可能会在以后发生变化。如果发生这种情况，为了“重新发现”新格式，请在显示图像时单击 Raw 按钮。这将在您的浏览器中“打开”图像。复制 URL 并瞧瞧！
注意：虽然存储库不再托管在 GitHub 上，但我更新了网址以反映关于用户内容的新 GitHub policy
【讨论】：
对于其他发现此问题的人，Github 现在支持相对链接：help.github.com/articles/relative-links-in-readmes 这不再是一个好的解决方案。 GitHub 现在支持使用相对路径链接到图像： 这里的好处是您可以使用其他分支并且知道您在文档中拥有正确版本的图像。
@Brad 我将图像存储在assets 分支中，并且在使相对路径与 GitHub README 和本地 README 文件一起使用时遇到问题。请看this question【参考方案2】：
你真的应该使用相对网址。这样他们也可以更好地用于私人回购。
假设你的 repo 在 screenshots 文件夹中有 latest.png。
~B
【讨论】：
我同意，最好让它与 repo 中的图像相关 :-) Github 偶尔会更改原始文件路径尤其正确，尤其是最近从“github.com/user-name/repo-name/raw”更改为“raw.githubusercontent.com/user-name/repo-name”。使用相对路径，这样您就不需要经常检查您的 repo 图片链接是否损坏。 您也可以使用<img src="../<branch>/screenshot.jpg?raw=true" width="100" height="100" />，如果您想通过提供图像来支持视网膜支持，例如200*200 像素 ;)
如何在与仓库相关的公共 GitHub 页面中显示来自私有仓库的图像？【参考方案3】：
要使用图片的相对 URL，请将其包装在段落标签内。
我遇到了这个问题，尤其是在处理单个图像时。
例子：
<p>
<img src="relativePath/file.png" />
</p>
【讨论】：
【参考方案4】：对先前答案的扩展...
当线路出现时，图像不会显示给我：
在<h2></h2> 行的正下方，我需要在它们之间添加一个空行。
希望这可以节省一些时间！
【讨论】：
【参考方案5】：我想我会在 2019 年更新这个，因为我自己搞不清楚。我将图像上传到 GitHub 上的存储库，然后使用图像的原始 url 将其导入我的 markdown 文件。要获取原始 url，请单击 GitHub 中的特定图像链接，以便您位于该特定图像的页面上。照片的右上角有两个按钮，“下载”和“历史记录”。如果您单击“下载”，它会将您带到该原始 url，图片占据全屏。复制该网址，然后将其粘贴到您的降价文件中：
这个按钮用来说“原始”而不是“下载”，所以我希望这可以帮助人们找到它。
【讨论】：
【参考方案6】：这可能与之前的答案无关。我和 OP 有同样的问题 - 我被指引到这里，但对我没有帮助。不过，我希望我可以帮助解决这个问题 - 因为它涵盖了为什么图像无法在 README.md 文件中呈现的可能性。
我遇到的issue是文件名README.md文件写成readME
不仅缺少.md，它的写法也不同。
显然，我们不应该重命名README.md 文件。它必须是该文件的原始名称，以便在 github README.md 页面上呈现您要上传的图像或 gif。希望这对某人有所帮助，在极少数情况下，就像我一样。
【讨论】：
【参考方案7】：检查文件扩展名，因为.png 与.PNG 不同。
同时在指定文件路径时使用/ 而不是\。
【讨论】：
如果没有看到您正在使用的标记并且不知道图像的真实路径，很难提供帮助。可以提供吗？【参考方案8】：旁注，使用 reStructuredText 时：
.. image:: /screenshots/latest.png?raw=true
【讨论】：
【参考方案9】：我已经使用“复制路径”进行了测试，在某些地方它可以工作，而在其他地方却没有。
如果没有，我复制了永久链接并改用它。
【讨论】：
【参考方案10】：当正在导入图像的行上方有任何 html 标记时，它不起作用。您可以尝试删除 html 代码或添加一些空白行以在自述文件中显示图像。
【讨论】：
【参考方案11】：我必须添加<br> 以返回一行，以便图像显示在我的身上。这一发现的灵感来自此线程中的评论，即在标记后留空行。
【讨论】：
以上是关于图片未显示在 GitHub 上的 README.md 中的主要内容，如果未能解决你的问题，请参考以下文章