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

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

stack overflow How to add screenshot to READMEs in github repository?
原文答案
author avatar

接受的答案

如果您使用 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 建议您将 relative links?raw=true 参数一起使用,以确保分叉的 repos 正确指向。

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 日:工作答案-

  1. 上传你的图片到 postimage.org
    2.上传图片后复制Github-Markdown-Url
  2. 插入您的自述文件
作者头像

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

如果您的文件在存储库中

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

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

![ScreenShot](https://{url})
作者头像

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

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

但是: 如何提供 url

  • 你可能不想让你的 repo 被截图弄得乱七八糟,它们与代码无关
    *您可能不想处理在网络上提供图像的麻烦...(将其上传到服务器...)。

所以...你可以使用这个 awesome trick 让 github 托管你的图像文件。 TDLR:

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

    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>
作者头像

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

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

  • Create an issue regarding adding images

  • Add the image by drag and drop or by file chooser

  • Then copy image source

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

完毕!

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

Sample issue