如何将屏幕截图添加到 github 存储库中的 README？

Posted 2023-03-28

【中文标题】如何将屏幕截图添加到 github 存储库中的 README？

【英文标题】：How to add screenshot to READMEs in github repository?

【发布时间】：2012-04-28 16:22:03

【问题描述】：

是否可以将屏幕截图放在 GitHub 存储库的 README 文件中？语法是什么？

【问题讨论】：

对此的正确解决方案是使用相对引用，根据这个答案***.com/a/11916467/1633251（有关如何执行此操作，请参阅带有新 github 文档链接的评论）。简短的回答是使用[Read more words!](docs/more_words.md)

大多数解决方案都建议指向 repo 本身。如果你想避免存储库中的二进制文件（即使是在一个单独的分支中，如建议的那样）并且你想将它存储在外部位置怎么办？有什么好的做法吗？可能是一个要点（IDK，如果要点可以是二进制或只是文本）？为项目“myproject”创建另一个仓库“myproject-assets”？有没有类似于 youtube 上传视频的事实标准的外部流行图片位置？

Add images to README.md on GitHub的可能重复

guides.github.com/features/mastering-markdown

2021 年 3 月：简单拖放：见 my answer below

【参考方案1】：

点击右上角的绿色按钮创建一个新问题。截取您需要的任何内容并将其粘贴到问题消息中（Mac 上的 CMD+V 或 Windows 上的 CTR+V）。

【参考方案2】：

对我来说，相对路径效果很好。

我是怎么做到的： 在我想要使用来自另一个目录的图片的当前 md 文件中，我使用了这样的相对路径 - 请考虑以下几点。

md 文件位置：base dir -> _post -> current_file.md

&我要使用的图片文件位置：base dir -> _asset -> picture_to_use.jpeg

我在current_file.md文件中使用的语句：

![your-pic-caption-name](../_asset/picture_to_use.jpeg)

注意 - 在此之前，我使用的是直接 _asset，但理想情况下，它是从 ../_asset/and-so-no 开始的

参考 - https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/about-readmes

【参考方案3】：

从 2021 年 3 月起，现在支持此功能：

Attaching files to markdown files

您现在可以在 Web 中编辑 Markdown 文件时将文件（包括图像）附加到它们。

这就像问题和拉取请求中的文件附件一样工作，并支持相同的文件类型。

只需拖拽、点击选择或粘贴即可。

注意：如果您将图像添加到 Markdown 文件，任何人都可以在未经身份验证的情况下查看匿名图​​像 URL，即使 Markdown 文件位于私有存储库中。 要使图像保密，请从需要身份验证的专用网络或服务器提供它们。 有关匿名 URL 的更多信息，请参阅“About anonymized image URLs”。

【讨论】：

如何自定义截图的宽高？

@NeerajaGandla 导入后，检查gist.github.com/uupaa/f77d2bcf4dc7a294d109 或gist.github.com/MichaelPolla/a65ac84286ab523603e64549f9850223

【参考方案4】：

在上面许多人提到的自述文件中添加![ScreenShot](screenshot.png)。将 screenshot.png 替换为您在存储库中上传的图像的名称。

但是当你上传图片时，这里有一个新手提示（因为我自己犯了这个错误）：

确保您的图片名称不包含空格。我的原始图像保存为“截图日月年 i​​d.png”。如果您不将名称更改为 contentofimage.png 之类的名称，它将不会在您的自述文件中显示为图像。

【参考方案5】：

2020 年 6 月 3 日：工作答案-

上传图片到postimage.org 上传图片后复制Github-Markdown-Url 插入自述文件

【讨论】：

你是唯一一个回答对我有用的人

这是一个很好的答案，但请注意，您依赖该服务永远存在。它不保证有一天不会消失。 GitHub 也没有，但有足够多的重要项目和人们依赖它，我觉得至少在它崩溃之前我会得到备份/转储。另外，我不知道它的条款和条件是什么，但同样，因为更多的人会仔细研究 GitHub 的 T&C，所以我更相信它。

...如果图像在 GitHub 上，图像和自述文件将一起消失。

【参考方案6】：

我用谷歌搜索了几个类似的问题，但没有看到任何关于我的问题及其非常简单/容易的解决方案的答案。

Google Cloud Storage - README 中的图片处理方式略有不同

这里是：像 OP 一样，我想在我的 Github README 中添加一个图像，并且知道这样做的 Markdown 语法，输入它：

![My Image](https://storage.cloud.google.com/$MY_BUCKET/$MY_IMAGE

您需要完成上述实际替换（例如 MY_IMAGE=image.jpg）才能使其正常工作。

但是，等等……失败——没有实际渲染的照片！ 链接与 Google Storage 提供的完全相同！

Github camo - 匿名图片

Github hosts your images anonymously，耶！但是，这给 Google 存储资产带来了问题。您需要从 Google Cloud Console 获取生成的 url。

我确信有一种更流畅的方法，但是，只需访问您给定的 URL 端点并复制长 URL。详情：

说明

访问您的存储控制台：https://console.cloud.google.com/storage/browser/$MY_BUCKET?project=$MY_PROJECT 点击您想在 Github 中显示的图片（这将打开“对象详细信息”页面） 将该 URL（以 https 而不是 gs 开头的 URL）复制到新的浏览器选项卡/窗口中 将新生成的 URL（它应该更长）从您的新浏览器选项卡/窗口复制到您的 Github README 文件中

希望这有助于加快速度并为其他人澄清这个问题。

【讨论】：

仅供参考——Google 或 Github 方面似乎发生了一些变化。我在自述文件中的一些图像通过这种方法失败，一些图像在 2020 年 3 月 28 日下午工作。YMMV 在这里！

【参考方案7】：

通过上传文件选项在存储库中添加图像，然后在自述文件中

![Alt text]("enter image url of repositoryhere") 

【参考方案8】：

如果你使用 Markdown (README.md)：

如果你的 repo 中有图片，你可以使用相对 URL：

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

如果您需要嵌入在其他地方托管的图片，您可以使用完整的 URL

![Alt text](http://full/path/to/img.jpg "Optional title")

GitHub 建议您使用带有?raw=true 参数的相对链接，以确保分叉存储库正确指向。

raw=true 参数是为了确保您链接到的图像将按原样呈现。这意味着只有图像将被链接到，而不是相应文件的整个 GitHub 界面。详情请见this comment。

查看示例：https://raw.github.com/altercation/solarized/master/README.md

如果您使用 SVG，那么您还需要将 sanitize 属性设置为 true：?raw=true&sanitize=true。 （感谢@EliSherer）

另外，README 文件中的相关链接文档：https://help.github.com/articles/relative-links-in-readmes

当然还有降价文档：http://daringfireball.net/projects/markdown/syntax

此外，如果您创建一个新分支 screenshots 来存储图像，您可以避免它们出现在 master 工作树中

然后您可以使用以下方法嵌入它们：

![Alt text](/../<branch name>/path/to/image.png?raw=true "Optional Title")

【讨论】：

好吧，我在相关链接上添加了官方文档，但我无法找到一些使用它们的存储库，如果您有建议，我很乐意提供帮助，因为整点都在帮助更多的人，不在范围内（我的错误在这里）。

@Paul ，这是一个这样做的示例存储库！ github.com/Tarrasch/zsh-bd

github.com/altercation/solarized 是上面示例的渲染版本，以防对任何人有帮助。

当你说/relative/path/to/img.jpg时，那不是因为前导斜线导致的绝对路径吗？

为了 SVG 工作添加清理（即?raw=true&sanitize=true）

【参考方案9】：

首先，在本地存储库的根目录中创建一个目录（文件夹），其中包含您要添加的screenshots。让我们将此目录的名称称为screenshots。将要添加的图像（JPEG、PNG、GIF 等）放入此目录。

android Studio Workspace Screenshot

其次，您需要在自述文件中添加指向每个图像的链接。因此，如果我的屏幕截图目录中有名为 1_ArtistsActivity.png 和 2_AlbumsActivity.png 的图像，我将添加它们的链接，如下所示：

 <img src="screenshots/1_ArtistsActivity.png"  /> <img src=“screenshots/2_AlbumsActivity.png"  />

如果您希望每个屏幕截图单独一行，请将其链接写在单独的行上。但是，最好将所有链接写在一行中，仅用空格分隔。它实际上可能看起来不太好，但这样做 GitHub 会自动为您安排它们。

最后，提交您的更改并推送！

【参考方案10】：

将此添加到自述文件

<div align="center">
    <img src="/screenshots/screen1.jpg" </img> 
</div>

【参考方案11】：

比添加 URL 简单得多 只需将图像上传到同一个存储库， 喜欢：

![Screenshot](screenshot.png)

【参考方案12】：

方法1->降价方式

![Alt Text](https://raw.github.com/USERNAME/REPOSITORY/BRANCH/PATH)

方法2->HTML方式

<img src="https://link(format same as above)"  />

或

<img src="https://link" style=" width:100px ; height:100px " />

注意->如果您不想为图像设置样式，即调整大小，请删除样式部分

【参考方案13】：

对我来说最好的方法是-

在 github 上使用该存储库创建一个新问题，然后以 gif 格式上传文件。要将视频文件转换为 gif 格式，您可以使用此网站http://www.online-convert.com/ 提交新创建的问题。 复制上传文件的地址 最后在你的 README 文件中放 

希望这会有所帮助。

【讨论】：

和***.com/a/32252663/1570104有什么区别？

【参考方案14】：

降价： ![Screenshot](http://url/to/img.png)

创建有关添加图像的问题 通过拖放或文件选择器添加图像

然后复制图片源

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

完成！

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

Sample issue

【讨论】：

我很久以前就这样做了，现在图像不可用。所以我不推荐这个。

在这种情况下，您总是可以使用 imgur 或一些自定义图像 cdn :)

【参考方案15】：

显示图片的markdown语法确实是：

![image](https://url)

但是：如何提供url？

您可能不想让您的代码库被屏幕截图弄得乱七八糟，它们与代码无关 您可能不想处理在网络上提供图像的麻烦...（将其上传到服务器...）。

所以...您可以使用awesome trick 让 github 托管您的图像文件。 TDLR：

在您的 repo 的问题列表中创建问题 在此问题上拖放您的屏幕截图 复制github刚刚为你创建的markdown代码来展示你的图片 将其粘贴到您的自述文件中（或任何您想要的地方）

http://solutionoptimist.com/2013/12/28/awesome-github-tricks/

【参考方案16】：

即使已经有一个公认的答案，我想添加另一种方式来将图像上传到 GitHub 上的自述文件。

您需要在您的 repo 中创建问题 将您的图片拖放到评论区 生成图片链接后，将其插入自述文件中

更多详情您可以找到here

【讨论】：

我很想知道以这种方式加载的图片能存活多久。 github 是否执行一些图像清理？比如，“如果这张图片没有从任何 github 问题中引用，我可以安全地删除它”...

@Artin 可能仅在完全删除问题时。已关闭的问题会永远存在，因为它们在文档和调试中发挥着非常重要的作用

【参考方案17】：

图像位于/screen-shots 目录中。外部<div> 允许定位图像。填充是使用<img width="desired-padding" height="0"> 实现的。

<div align="center">
        <img  src="screen-shots/about.PNG"  title="About screen"</img>
        <img  >
        <img  src="screen-shots/list.PNG"  title="List screen"></img>
</div>

【讨论】：

在我的一生中，我无法在自述文件中将图像居中 - 您的答案包含其中，所以谢谢！

我发现这个答案很有帮助，因为它可以让您设置图像的尺寸

【参考方案18】：

下面的一行应该是你要找的

如果您的文件在存储库中

![ScreenShot](https://raw.github.com/username/repository/branch/path)

如果您的文件位于其他外部网址中

![ScreenShot](https://url)

【讨论】：

建议使用图片文件的相对链接，见Relative links in READMEs - Github Help

-1 因为@shaobin0604给出的原因；官方文档建议在链接到您自己的 repo 中的文件时使用相对链接，以便在 fork 时链接指向正确的位置。

【参考方案19】：

我发现我的 repo 中的图片路径不够用，我必须链接到 raw.github.com 子域上的图片。

网址格式https://raw.github.com/USERNAME/REPOSITORY/BRANCH/PATH

降价示例![Settings Window](https://raw.github.com/ryanmaxwell/iArrived/master/Screenshots/Settings.png)

【讨论】：

由于@sorens 对已接受答案的评论而对此表示反对。指定绝对浴是不好的，因为它在分叉的存储库上不能很好地工作。 （或者如果你重命名你的 repo，或者如果 github 更改域名等）

@LinusUnnebäck：恕我直言，使用绝对路径有一个很好的理由：如果 readme.md 也用于其他地方，例如，作为 Doxygen 主页。相对链接将不起作用。

@Ela782 不过，进一步说明，不应该对于那些特别是从 GitHub 翻录 README 文件的软件来说不是问题；此类软件应该知道正确解析相对 URL。以npm does 为例。

如何链接到raw.github.com子域上的图片？图片文件上传到哪里？

@Saif raw.github.com 只是反映了提交给您的 github 存储库的内容。只需将图像提交到您的存储库并遵循指定的 URL 格式。