680

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

4

20 回答 20

942

如果您使用 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以确保分叉的 repos 正确指向。

该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

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

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

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

![Alt text](/../<branch name>/path/to/image.png?raw=true "Optional Title")
于 2012-04-17T10:22:08.547 回答
85

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

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

您可以在此处找到更多详细信息

于 2015-07-21T03:15:19.183 回答
55

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

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

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

于 2012-10-21T11:47:35.067 回答
44

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

  1. 将您的图片上传到postimage.org
  2. 上传图片后复制 Github-Markdown-Url
  3. 插入自述文件
于 2016-11-18T19:33:57.180 回答
23

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

如果您的文件在存储库中

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

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

![ScreenShot](https://{url})
于 2013-05-26T20:09:17.493 回答
18

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

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

但是：如何提供url？

  • 你可能不想用截图弄乱你的仓库，它们与代码无关
  • 您可能不想处理让您的图像在网络上可用的麻烦......（将其上传到服务器......）。

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

  1. 在你的 repo 的 issue list 上创建一个 issue
  2. 在此问题上拖放您的屏幕截图
  3. 复制 github 刚刚为您创建的 markdown 代码以显示您的图像
  4. 将其粘贴到您的自述文件中（或任何您想要的地方）

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

于 2015-08-27T14:50:50.580 回答
10

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

![Screenshot](screenshot.png)

于 2018-01-30T11:33:28.007 回答
8

将此添加到自述文件

<div align="center">
    <img src="/screenshots/screen1.jpg" width="400px"</img> 
</div>
于 2018-03-08T17:16:55.637 回答
6

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

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

  • 然后复制图片源

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

完毕！

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

示例问题

于 2016-10-12T19:16:53.137 回答
6

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

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

于 2017-08-17T14:44:21.973 回答
5

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

将文件附加到 Markdown 文件

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

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

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

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

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

于 2021-03-03T22:28:05.513 回答
4

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

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

于 2022-01-23T07:18:12.523 回答
3

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

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

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

于 2020-10-06T01:10:55.023 回答
2

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

我是怎么做到的： 在我想要使用来自另一个目录的图片的当前 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

于 2021-09-09T12:57:52.623 回答
2

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

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

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

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

指示

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

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

于 2020-01-03T17:31:24.350 回答
1

首先，在本地存储库的根目录中创建一个目录（文件夹），其中包含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 会自动为您安排它们。

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

于 2018-04-02T14:23:51.363 回答
0

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

![Alt text]("enter image url of repositoryhere")
于 2019-12-23T11:58:24.363 回答
0

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

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

希望这会有所帮助。

于 2016-11-27T22:19:04.037 回答
0

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

于 2021-10-22T08:07:53.223 回答
-5

图像位于/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>
于 2014-09-24T11:34:33.640 回答