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

如果您使用 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 界面。有关详细信息，请参阅 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")

---

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

您需要在您的仓库中创建问题

将您的图像拖放到评论区

生成图像链接后，将其插入自述文件

您可以找到更多详细信息here

---

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

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

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

---

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

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

---

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

如果您的文件在存储库中

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

如果您的文件位于其他外部 url

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

---

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

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

但是：如何提供url？

你可能不想用截图弄乱你的仓库，它们与代码无关

您可能不想处理让您的图像在网络上可用的麻烦......（将其上传到服务器......）。

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

在您的 repo 的问题列表上创建一个问题 拖放您在此问题上的屏幕截图 复制 github 刚刚为您创建的降价代码以显示您的图像 将其粘贴到您的自述文件（或任何您想要的位置）

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

---

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

![Screenshot](screenshot.png)

---

将此添加到自述文件

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

---

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

创建有关添加图像的问题

通过拖放或文件选择器添加图像

然后复制图片源

现在将  添加到您的 README.md 文件中

完毕！

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

Sample issue

---

方法1->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 " />

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

---

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

将文件附加到 Markdown 文件

您现在可以在 Web 中编辑文件时将文件（包括图像）附加到 Markdown 文件。这就像问题和拉取请求中的文件附件一样工作，并支持相同的文件类型。只需拖放、单击并选择或粘贴即可。注意：如果您将图像添加到 Markdown 文件，任何人都可以在无需身份验证的情况下查看匿名图像 URL，即使 Markdown 文件位于私有存储库中。要使图像保密，请从需要身份验证的专用网络或服务器提供它们。有关匿名 URL 的更多信息，请参阅“关于匿名图像 URL”。

---

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

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

md 文件位置：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

---

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

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

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

---

请放松这四个步骤，这对我有用

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

---

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

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 迷彩 - 匿名图片

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（应该更长）从新的浏览器选项卡/窗口复制到 Github README文件

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

---

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

Android Studio Workspace Screenshot

其次，您需要将每个图像的链接添加到您的 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 会自动为您安排它们。

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

---

对我来说最好的方法是——

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

希望这会有所帮助。

---

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

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

---

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

---

在 README.md 中：

这种方法（使用相对于 screenshots/filename.png 的文件路径）假设您的屏幕截图是您的 repo 的一部分。对于学生项目、个人工作和其他小东西，包括你的 repo 中的屏幕截图并不是什么大事。

如果你不想在你的 repo 中截取屏幕截图，你可以将它上传到其他地方并直接链接到它，如下所示：

.png 是首选文件格式。

---

图像位于 /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>

---