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

是否可以在GitHub存储库中的自述文件中放置截图? 什么语法?

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

假设您在回购站中有图像,则可以使用相对URL:

 ![Alt text](/relative/path/to/img.jpg?raw=true "Optional Title") 

如果您需要embedded其他地方托pipe的图片,则可以使用完整的url

 ![Alt text](http://full/path/to/img.jpg "Optional title") 

GitHubbuild议您使用相对链接?raw=true参数来确保分叉的回购点正确。

看看一个例子: https : //raw.github.com/altercation/solarized/master/README.md

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

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

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

您可以使用以下方法embedded它们:

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

我发现我的回购中的图像path不够,我不得不链接到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)

即使已经有一个被接受的答案,我想添加另一种方式来上传图片到GitHub自述。

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

更多细节你可以在这里find

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

如果你的文件在存储库中

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

如果你的文件在其他外部url

 ![ScreenShot](https://{url}) 
  1. 将您的图片上传到postimage.org
  2. 获取github Markdownurl
  3. 插入您的自述

用于显示图像的markdown语法实际上是:

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

但是:如何提供的url

  • 你可能不想用截图混淆你的回购,它们与代码无关
  • 你可能不想要处理让你的图像在networking上可用的麻烦…(上传到服务器…)。

所以…你可以使用这个令人敬畏的技巧使github托pipe你的图像文件。 TDLR:

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

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

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

  • 创build一个关于添加图像的问题
  • 通过拖放或文件select器添加图像
  • 然后复制图像源

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

完成!

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

示例问题

对我来说最好的办法是 –

  1. 用github上的那个仓库创build一个新的问题,然后上传gif格式的文件。要把video文件转换成gif格式,你可以使用这个网站http://www.online-convert.com/
  2. 提交新创build的问题。
  3. 复制上传文件的地址
  4. 最后在你的自述文件里放上![demo](COPIED ADDRESS)

希望这会有所帮助。

方法1->降价方式

 ![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 " /> 

注意 – >如果你不想风格你的形象,即resize删除样式部分

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