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

本文翻译自：How to add screenshot to READMEs in github repository?

Is it possible to place a screenshot in README file in a GitHub repository? 是否可以在GitHub存储库中的README文件中放置屏幕截图？ What's the syntax? 语法是什么？

---

#1楼

参考：https://stackoom.com/question/gkiS/如何在github存储库中添加屏幕截图到README

---

#2楼

If you use Markdown (README.md): 如果您使用Markdown（README.md）：

Provided that you have the image in your repo, you can use a relative URL: 如果您的仓库中有图像，则可以使用相对URL：

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

If you need to embed an image that's hosted elsewhere, you can use a full URL 如果您需要嵌入托管在其他位置的图像，则可以使用完整的URL

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

GitHub recommend that you use relative links with the ?raw=true parameter to ensure forked repos point correctly. GitHub建议您使用带有?raw=true参数的相对链接来正确确保forked repos point。

The raw=true parameter is there in order to ensure the image you link to, will be rendered as is. raw=true参数是为了确保您链接的图像，将按原样呈现。 That means that only the image will be linked to, not the whole GitHub interface for that respective file. 这意味着只有图像将链接到，而不是相应文件的整个GitHub接口。 See this comment for more details. 有关详细信息，请参阅此评论 。

Check out an example: https://raw.github.com/altercation/solarized/master/README.md 查看示例： https ： //raw.github.com/altercation/solarized/master/README.md

If you use SVGs then you'll need to set the sanitize attribute to true as well: ?raw=true&sanitize=true . 如果您使用SVG，那么您还需要将sanitize属性设置为true ： ?raw=true&sanitize=true 。 (Thanks @EliSherer) （谢谢@EliSherer）

Also, the documentation on relative links in README files: https://help.github.com/articles/relative-links-in-readmes 此外，有关README文件中相对链接的文档： https ： //help.github.com/articles/relative-links-in-readmes

And of course the markdown docs: http://daringfireball.net/projects/markdown/syntax 当然还有降价文档： http ： //daringfireball.net/projects/markdown/syntax

Additionally, if you create a new branch screenshots to store the images you can avoid them being in the master working tree 此外，如果您创建新的分支screenshots来存储图像，则可以避免它们位于master工作树中

You can then embed them using: 然后您可以使用以下方法嵌入它们：

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

---

#3楼

I found that the path to the image in my repo did not suffice, I had to link to the image on the raw.github.com subdomain. 我发现我的raw.github.com的图像路径不够，我不得不链接到raw.github.com子域上的图像。

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

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

---

#4楼

One line below should be what you looking for 下面的一行应该是你要找的

if your file is in repository 如果您的文件在存储库中

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

if your file is in other external url 如果您的文件在其他外部网址中

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

---

#5楼

With the images located in /screen-shots directory. 图像位于/screen-shots目录中。 The outer <div> allows the images to be positioned. 外部<div>允许定位图像。 Padding is achieved using <img width="desired-padding" height="0"> . 使用<img width="desired-padding" height="0">来实现<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>

---

#6楼

Even though there is already an accepted answer I would like to add another way to upload images to readme on GitHub. 即使已经有一个已接受的答案，我想添加另一种方法将图像上传到GitHub上的自述文件。

• You need to create issue in your repo 您需要在回购中创建问题
• Drag and drop in the comment area your image 拖放图像的注释区域
• After link for the image is generated insert it to your readme 生成图像链接后，将其插入自述文件

More details you can find here 您可以在此处找到更多详情