题 在GitHub上将图像添加到README.md


最近我加入了 GitHub上。我在那里举办了一些项目。

我需要在README文件中包含一些图像。我不知道该怎么做。

我搜索了这个,但我得到的只是一些链接告诉我“在web上托管图像并在README.md文件中指定图像路径”。

如果没有在任何第三方网络托管服务上托管图像,有没有办法做到这一点?


1082
2018-01-24 05:44


起源


jefclaes.be/2012/04/add-images-to-github-readme.html - Explosion Pills
重复 stackoverflow.com/questions/10189356/... 于2012年发布。 - leetNightshade
不是偏离主题,GitHub是程序员的工具。 - Lance Roberts
可能重复 如何在github存储库中向README添加屏幕截图? - Marcus
我发现在使用Github中的图像时我必须使用列出的地址,这与人们在下面说的不同。 ![title](https://github.com/username/reponame/blob/master/subfolders.../filename.jpg)  注意文件名中的“blob”术语。这里的答案在2017年对我不起作用。 - Ryan


答案:


试试这个降价:

![alt text](http://url/to/img.png)

我认为如果图像存储在您的存储库中,您可以直接链接到图像的原始版本。即

![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

编辑: 刚注意到评论链接到建议使用gh页面的文章。此外,相对链接可能比我上面发布的绝对URL更好。


1142
2018-01-24 05:46



help.github.com/articles/how-do-i-add-images-to-my-wiki - sunkehappy
你也应该考虑使用 相对链接 - mgalgs
相对链接在这里不是很好用,想象你的自述文件也显示在npm上,不会以这种方式托管图像 - 它需要链接到GitHub。图像srcs应该在 github.com 域名,而不是 raw.github.com 子域而不是 raw.githubusercontent.com 域。 - Lee Crossley
我实际上最终选择了相对路径(对我而言,这只是图像文件的名称,因为我拥有根目录中的所有内容)。我一直在维护README.md的两个副本,一个用于/ usr / share / projectname / docs中的本地安装,另一个用于github。现在,我可以使用相同的README.md,因为图像文件名在两种情况下都能正常工作。如果我想在其他地方发布我的README的部分副本,我要么必须在其他地方托管图像,要么放在raw.github.com网址中。 - Colin Keenan
GitHub自己推荐相对路径: help.github.com/articles/relative-links-in-readmes 绝对路径的一个主要缺点是,如果图像在master中移动,那么仍然指向旧URL的其他分支将会中断。 - Jack O'Connor


您也可以使用相对路径

![Alt text](relative/path/to/img.jpg?raw=true "Title")

186
2017-10-08 03:18



是。这是迄今为止最简单的方法,除非你担心性能。我会注意到这是相对于 目录 不是 回购,所以如果你在'about_pics.md'所在的目录中有'myimage.png',那么标记是:![What is this](myimage.png) - Rich
这是一个很棒的解决方案,因为1)它工作2)图像也显示在本地查看器中,不需要互联网访问 - Régis B.
@Rich你能否扩展你对绩效的评论。相对路径方法存在哪些性能问题? - Lea Hayes
哦,我只是认为,因为这会从回购中检索图像,所以它本质上比在CDN或其他任何地方使用图像做更多的工作。 - Rich
这条路是相对于什么的? - Dims


  • 您可以创建新问题
  • 上传(拖放)图像到它
  • 复制图像URL并将图像URL复制页面到README.md文件。

这是一个详细的youTube视频详细解释了这个:

https://www.youtube.com/watch?v=nvPOUdz5PL4


117
2017-10-28 06:03



这也是一个很好的提示,但遗憾的是它不是README文件的答案。复制粘贴的东西不起作用(至少目前不行)。 - Per Lundberg
这应该是公认的答案...... - Ryan Vice
你能在这里至少添加一些要点吗?链接不是真正的答案。 - JGallardo
据我所知,你真的不需要 保存 问题。这样,您在问题跟踪器中就不需要那些虚拟票证。问题是,如果这是一个“安全”的方法,这意味着如果GitHub将检测(一段时间后)图像是孤立的,因此将其从GitHub CDN中删除? - peterh
链接已经死了。 - Spen


它比那简单得多。

只需将您的图像上传到存储库根目录,并链接到没有任何路径的文件名,如下所示:

![Screenshot](screenshot.png)

58
2017-07-08 20:07



不,我不认为在git repo中添加屏幕截图是一种很好的做法。尤其不是根本。 Ahmad Ajmi的答案要好得多 - Arnaud P
不是在根,但你可以很容易地适应这一点 docs/images 或者什么,小png截图是好的恕我直言 - Christophe Roussy
这应该是公认的解决方案,尤其是。与克里斯托夫的建议将图像放在doc / tree / - Mike Ellis
刚刚使用该解决方案,它完美地工作,简单易用。 - Ruff9
完善..!!如果png在另一个文件夹中。只需添加路径“folderName / screenshot.png” - Soumen


您还可以添加简单的图像 HTML标签

<p align="center">
  <img src="your_relative_path_here" width="350" title="hover text">
  <img src="your_relative_path_here_number_2_large_name" width="350" alt="accessibility text">
</p>

58
2018-01-30 04:45



当您在markdown文件中使用HTML标记时。它将被忽略 Pandoc,通用文档转换器。 - Xinyang Li
我想这不够普遍,然后哈哈 - rococo
这是最好的,因此它可以居中或放在一侧(至少对于较小的图像)。 - Alexis Wilke


许多发布的解决方案都不完整或不符合我的口味。

  • 像imgur这样的外部CDN为链条增加了另一种工具。咩。
  • 在问题跟踪器中创建虚拟问题是一个黑客。它会造成混乱并使用户感到困惑。将此解决方案迁移到fork或关闭GitHub是一件痛苦的事。
  • 使用gh-pages分支使URL变得脆弱。另一个从事项目维护gh页面的人可能不知道外部的东西取决于这些图像的路径。 gh-pages分支在GitHub上具有特定的行为,这对于托管CDN图像不是必需的。
  • 在版本控制中跟踪资产是一件好事。随着项目的发展和变化,它是一种更可持续的方式来管理和跟踪多个用户的变化。
  • 如果图像适用于软件的特定版本,则最好链接不可变图像。这样,如果稍后更新图像以反映软件的更改,则阅读该修订版自述文件的任何人都将找到正确的图像。

我的首选解决方案,受到启发 这个要点,是用一个 资产分支 同 永久链接到特定修订

git checkout --orphan assets
git reset --hard
cp /path/to/cat.png .
git add .
git commit -m 'Added cat picture'
git push -u origin assets
git rev-parse HEAD  # Print the SHA, which is needed below.

构建此图像修订版的“永久链接”,并将其包装在Markdown中:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/{sha}/cat.png)

例如

![Cat](https://raw.githubusercontent.com/paulmelnikow/zsh-startup-timer/3923c60fc66d4223ccf063d169ccf2ff167b1270/cat.png)

要始终在资产分支上显示最新图像,请使用 assets 取代沙:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/assets/cat.png)


20
2018-03-08 17:13





承诺 你的形象(image.png)在一个文件夹中(MyFolder文件)并在您的。中添加以下行 README.md

![Optional Text](../master/myFolder/image.png)


14
2018-06-14 10:01





基本语法

![myimage-alt-tag](url-to-image)

这里:

  1. my-image-alt-tag:如果未显示图像,将显示的文本。
  2. url-to-image:无论您的图像资源是什么。图像的URI

例:

![stack Overflow](http://lmsotfy.com/so.png)

这将如下所示:

stack overflow image by alamin


11
2018-01-21 16:09





  • 创建有关添加图像的问题
  • 通过拖放或文件选择器添加图像
  • 然后复制图像源

  • 现在添加 ![alt tag](http://url/to/img.png) 到您的README.md文件

完成!

或者你可以使用一些图像托管网站 imgur 并获取它的URL并将其添加到您的README.md文件中,或者您也可以使用一些静态文件托管。

样品问题


11
2017-10-12 19:02



喜欢将图像添加到问题技巧来托管它们 - Jordi Nebot
在我看来,这是添加它们的最简单方法。只需将它们拖入框中,复制地址并将其粘贴到自述文件中,并在下面加上标题。砰的一声,你做完了。 - Joe Hill