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

Question

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

Answer 1

如果您使用Markdown（README.md）：

如果您的仓库中有图像，则可以使用相对URL：

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

如果您需要嵌入托管在其他地方的图片，则可以使用完整的网址

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

GitHub建议您将相对链接与?raw=true参数一起使用，以确保正确分叉回购点。

raw=true参数用于确保您链接的图像，将按原样呈现。这意味着只有图像将链接到，而不是相应文件的整个GitHub接口。有关详细信息，请参阅this comment。

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

此外，有关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")

Answer 2

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

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

您可以找到更多详细信息here

Answer 3

我发现回购邮件中图片的路径不够，我必须链接到raw.github.com子域中的图片。

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

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

Answer 4

下面的一行应该是您要找的内容

如果您的文件在存储库中

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

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

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

Answer 5

1. 将您的图片上传到postimage.org
2. 获取github Markdown网址
3. 插入自述文件

Answer 6

显示图像的降价语法确实是：

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

但是：如何提供url？

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

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

1. 在您的回购的问题列表中创建问题
2. 在此问题上拖放屏幕截图
3. 复制github刚刚为您创建的降价代码以显示您的图片
4. 将其粘贴到您的自述文件上（或任何您想要的地方）

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

Answer 7

将此内容添加到README

<?php echo form_open('posts/update'); ?>
    <input type="hidden" name="id" value="<?php echo $post['id']; ?>">
    <input type="hidden"  id="old"  name="old"  value="<?php echo $post['post_image']   ?>">

    <div class="form-group">
        <label>Title</label>
        <input type="text" class="form-control" name="title" placeholder="Add Title" value="<?php echo $post['title']; ?>">
    </div>

    <div class="form-group">
        <label>Body</label>
        <textarea id="editor1" class="form-control" name="body" placeholder="Add Body"><?php echo $post['body']; ?></textarea>
    </div>

    <div class="form-group">
        <label>Change Image</label>
        <input class="form-control" type="file" name="userfile" size="20">
    </div>      
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Answer 8

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

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

• 然后复制图像源

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

完成！

或者你可以使用像imgur这样的图像托管网站并获取它的URL并将其添加到README.md文件中，或者也可以使用一些静态文件托管。

Sample issue

Answer 9

方法1-＆gt;降价方式

![Alt Text](https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH})

方法2-＆gt; HTML方式

<img src="https://link(format same as above)" width="100" height="100"/>

或

<img src="https://link" style=" width:100px ; height:100px " />

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

Answer 10

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

![Screenshot](screenshot.png)

Answer 11

首先，在本地仓库的根目录中创建一个目录（文件夹），其中包含您要添加的screenshots。我们来调用这个目录的名称screenshots。将要添加的图像（JPEG，PNG，GIF，`等）放入此目录。

Android Studio Workspace Screenshot

其次，您需要在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会自动为您安排它们。

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

Answer 12

从 2021 年 3 月开始，现在支持：

<块引用>

Attaching files to markdown files

<块引用>

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

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

只需拖拽、点击、选择或粘贴即可。

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

Answer 13

在自述文件降价中添加![ScreenShot](screenshot.png)，如上文所述。用您在存储库中上传的图像名称替换screenshot.png。

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

确保您的图像名称不包含空格。我的原始图像被保存为“屏幕快照日月年id.png”。如果不将名称更改为contentofimage.png之类的名称，则该名称不会在自述文件中显示为图像。

Answer 14

我在Google上搜索了一些类似的问题，但没有发现有关我的问题及其相当简单/轻松的解决方案的任何答案。

Google Cloud Storage-自述文件中的图像略有不同

在这里：像OP一样，我想在Github自述文件中添加一张图片，然后在知道Markdown语法的情况下在其中输入：

![My Image](https://storage.cloud.google.com/${MY_BUCKET}/${MY_IMAGE}

您需要完成上面的实际替换操作（例如MY_IMAGE = image.jpg），此功能才能起作用。

但是，等等...失败-没有实际的渲染照片！ 该链接与Google Storage给出的完全一样！

Github camo-匿名图片

Github hosts your images anonymously，是的！但是，这为Google存储资产带来了问题。您需要从Google Cloud Console获取生成的网址。

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

说明

1. 访问您的存储控制台：https://console.cloud.google.com/storage/browser/ $ {MY_BUCKET}？project = $ {MY_PROJECT}
2. 单击您要在Github中显示的图像（这将显示“对象详细信息”页面）
3. 将意大利面食URL（以https而不是gs开头）复制到新的浏览器标签/窗口中
4. 将面食从新的浏览器标签/窗口复制到新生成的URL（应该更长一些）到Github自述文件中

希望这有助于加快速度，并为其他人澄清这个问题。

Answer 15

在“从上传文件到存储库中添加图像”选项，然后在“自述文件”中添加

![Alt text]("enter image url of repositoryhere") 

Answer 16

对我而言，最好的方法是 -

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

希望这会有所帮助。

Answer 17

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