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

Question

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

Answer 1

如果您使用Markdown(README.md):

如果您的仓库中有图像,则可以使用相对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接口.有关详细信息,请参阅此评论.

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

此外,有关README文件中相对链接的文档:https://help.github.com/articles/relative-links-in-readmes

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

此外,如果您创建一个新分支true来存储图像,则可以避免它们位于?raw=true&sanitize=true工作树中

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

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

Answer 2

即使已经有一个已接受的答案,我想添加另一种方法将图像上传到GitHub上的自述文件.

• 您需要在回购中创建问题
• 拖放图像的注释区域
• 生成图像链接后,将其插入自述文件

您可以在此处找到更多详情

Answer 3

我发现我的仓库中的图像路径不够,我必须链接到raw.github.com子域上的图像.

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

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

Answer 4

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

如果您的文件在存储库中

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

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

![ScreenShot](https://{url})

Answer 5

1. 将您的图片上传到postimage.org
2. 获取github Markdown网址
3. 插入自述文件

Answer 6

确实显示图像的降价语法:

![image](https://{url})

但是:如何提供url？

• 您可能不希望使用屏幕截图混乱您的仓库,它们与代码无关
• 您可能不想要处理在网络上提供图像的麻烦......(将其上传到服务器......).

所以......你可以使用这个很棒的技巧让github托管你的图像文件.TDLR:

1. 在您的回购的问题列表上创建一个问题
2. 在此问题上拖放屏幕截图
3. 复制github刚为您创建的markdown代码,以显示您的图像
4. 粘贴在自述文件上(或任何你想要的地方)

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

Answer 7

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

将文件附加到 Markdown 文件

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

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

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

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

Answer 8

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

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

• 然后复制图片源

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

完毕！

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

示例问题

Answer 9

比添加URL简单得多。只需将图像上传到同一存储库即可，例如：

![Screenshot](screenshot.png)

Answer 10

将此添加到README

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

Answer 11

方法一->Markdown方式

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

方法2->HTML方式

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

或者

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

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