如何在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})
- 将您的图片上传到postimage.org
- 获取github Markdownurl
- 插入您的自述
用于显示图像的markdown语法实际上是:
![image](https://{url})
但是:如何提供的url
?
- 你可能不想用截图混淆你的回购,它们与代码无关
- 你可能不想要处理让你的图像在networking上可用的麻烦…(上传到服务器…)。
所以…你可以使用这个令人敬畏的技巧使github托pipe你的图像文件。 TDLR:
- 在您的回购问题列表中创build一个问题
- 在这个问题上拖放你的截图
- 复制github刚创build的markdown代码以显示图像
- 粘贴在您的自述文件(或任何你想要的地方)
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。
示例问题
对我来说最好的办法是 –
- 用github上的那个仓库创build一个新的问题,然后上传gif格式的文件。要把video文件转换成gif格式,你可以使用这个网站http://www.online-convert.com/
- 提交新创build的问题。
- 复制上传文件的地址
- 最后在你的自述文件里放上![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>