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

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

354818 次浏览
小开
最佳答案

如果您使用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界面。有关更多详细信息，请参阅这一评论。

查看示例：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

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

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

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

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

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

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

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

小开

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

如果您的文件在存储库中 

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

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

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

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

<div align="center">
<img width="45%" src="screen-shots/about.PNG" alt="About screen" title="About screen"</img>
<img height="0" width="8px">
<img width="45%" src="screen-shots/list.PNG" alt="List screen" title="List screen"></img>
</div>
小开

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

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

您可以找到更多详细信息这里

小开

显示图像的Markdown语法确实是：

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

但是：如何提供url？

  • 您可能不希望用屏幕截图杂乱您的存储库，它们与代码无关
  • 您可能不想处理在网络上提供图像的麻烦…（将其上传到服务器…）。

所以……你可以使用这个很棒的把戏让github托管你的图像文件。TDLR：

  1. 在存储库的问题列表中创建问题
  2. 拖放您对此问题的屏幕截图
  3. 复制github刚刚为您创建的Markdown代码显示您的图像
  4. 将其粘贴到您的自述文件（或任何您想要的地方）

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

小开

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

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

  • 然后复制图像源

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

成交！

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

示例问题

小开

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

  1. 上传图片到postimage.org
  2. 上传图像后复制Github-Markdown URL
  3. 插入你的自述文件
小开

对我来说最好的办法是

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

希望这能有所帮助。

小开

方法1->Markdown方式

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

方法2->超文本标记语言方式

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

或

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

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

小开

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

![Screenshot](screenshot.png)

小开

把这个加到自述文件中

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

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

Android Studio工作区截图

其次，你需要在README中添加每个图像的链接。所以，如果我的截图目录中有名为1_ArtistsActivity.png和2_AlbumsActivity.png的图像，我会像这样添加它们的链接：

 <img src="screenshots/1_ArtistsActivity.png" height="400" alt="Screenshot"/> <img src=“screenshots/2_AlbumsActivity.png" height="400" alt="Screenshot"/>

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

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

小开

从上传文件选项在存储库中添加图像，然后在README文件中

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

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

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图片上传失败的截图

Githubcamo-匿名图片

Github匿名托管您的图像，耶！但是，这给Google存储资产带来了一个问题。您需要从Google Cloud Console获取生成的URL。

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

说明

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

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

小开

如上所述，在自述文件标记中添加![ScreenShot](screenshot.png)。将screenshot.png替换为您在存储库中上传的图像的名称。

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

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

小开

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

将文件附加到降价文件

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

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

只需拖动和拖动，单击和选择，或粘贴。

删除并上传gif--https://i1.wp.com/user-images.githubusercontent.com/7900087/109347520-25045d00-7828-11eb-9609-ee96b396eb65.gif?ssl=1

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

小开

对我来说，相对的道路走得很好。

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

md文件loc：base dir -> _post -> current_file.md

&我想使用的图片文件loc：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

小开

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

小开

请暂停这四个步骤， 这对我很有用

1-在GitHub上创建一个新问题。 2-将图像拖放到评论字段或上传照片。 3-等待上传过程完成。 4-复制URL并在GitHub上的Markdown文件中使用它（在存储库的自述文件中使用生成的URL）。

小开

我的图像名称中有空格，例如Pasted image 20221006123035.png，这给我带来了一个问题，我浪费了一些时间来修复它。如果有人有同样的问题，那么下面是步骤

  • 我通过上传选项上传了图像
  • 然后在网站的文件浏览UI中点击图像。
  • 图像在浏览器中打开。我从浏览器的URL复制了图像的URL。您可以复制整个路径，或者相对于您的.md文件
  • 现在将该链接插入到. md文件，例如![overview](Pasted%20image%2020221006123035.png)

提交答案