最近，我加入了GitHub。我在那里主持了一些项目。

我需要在自述文件中包含一些图像。我不知道该怎么做。

我进行了搜索，但是得到的只有一些链接，这些链接告诉我“在网络上托管图像并在README.md文件中指定图像路径”。

没有将图像托管在任何第三方虚拟主机服务上，是否有任何方法可以做到这一点？

试试这个降价：

![alt text](http://url/to/img.png)

我认为，如果图像的原始版本存储在存储库中，则可以直接链接到该图像的原始版本。即

![alt text](https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true)

您还可以使用相对路径，例如

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

• 您可以创建一个新期刊
• 向其上传（拖放）图像
• 复制图像URL并将其粘贴到您的README.md文件中。

这是一个详细的youTube视频，详细解释了这一点：

https://www.youtube.com/watch?v=nvPOUdz5PL4

比这简单得多。

只需将您的映像上传到存储库根目录，然后链接到没有任何路径的文件名，如下所示：

![Screenshot](screenshot.png)

您还可以使用简单的HTML标签添加图像：

<p align="center">
  <img src="your_relative_path_here" width="350" title="hover text">
  <img src="your_relative_path_here_number_2_large_name" width="350" alt="accessibility text">
</p>

许多发布的解决方案不完整或不符合我的口味。

• 像imgur这样的外部CDN向链中添加了另一个工具。嗯
• 在问题跟踪器中创建虚拟问题是黑客。它会造成混乱并使用户感到困惑。将该解决方案迁移到fork或从GitHub迁移是很痛苦的。
• 使用gh-pages分支会使URL变脆。负责gh页的项目的其他人员可能不知道外部某些内容取决于这些图像的路径。gh-pages分支在GitHub上具有特定的行为，对于托管CDN图像不是必需的。
• 在版本控制中跟踪资产是一件好事。随着项目的发展和变更，这是一种管理和跟踪多个用户变更的更可持续的方式。
• 如果映像适用于软件的特定版本，则最好链接一个不变的映像。这样，如果以后更新映像以反映对软件的更改，则阅读该修订版自述文件的任何人都将找到正确的映像。

受此要旨启发，我首选的解决方案是使用资产分支，其永久链接到特定修订版。

git checkout --orphan assets
git reset --hard
cp /path/to/cat.png .
git add .
git commit -m 'Added cat picture'
git push -u origin assets
git rev-parse HEAD  # Print the SHA, which is optional, you'll see below.

构造一个与此图像修订版的“永久链接”，并将其包装在Markdown中。

手动查找提交SHA是很不方便的，因此如快捷方式中按Y键可以在特定提交中永久链接到文件。

要始终在资产分支上显示最新图像，请使用Blob URL：

https://github.com/github/{repository}/blob/assets/cat.png 

（在同一GitHub帮助页面上，文件视图显示了分支上的最新版本）

将图像（image.png）提交到文件夹（myFolder）中，并将以下行添加到README.md中：

![Optional Text](../master/myFolder/image.png)

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

• 然后复制图像源

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

做完了！

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

样本问题

我需要在自述文件中包含一些图像。我不知道该怎么做。

我创建了一个小向导，允许您为GitHub存储库的自述文件创建和自定义简单的图像库：请参阅ReadmeGalleryCreatorForGitHub。

该向导利用了GitHub允许img标签出现在其中的优势README.md。此外，该向导还通过将图像拖放到问题区域中来利用将图像上传到GitHub的流行技巧（如本主题答案之一所述）。

只需将<img>标记和相对src 添加到您的README.md即可。如果您不使用相对src，请确保服务器支持CORS。

之所以有效是因为GitHub支持inline-html

<img src="/docs/logo.png" alt="My cool logo"/>
# My cool project and above is the logo of it

在这里观察

基本语法

![myimage-alt-tag](url-to-image)

这里：

1. my-image-alt-tag：如果未显示图像，将显示的文本。
2. 网址到图片：无论您的图片资源是什么。图片的URI

例：

![stack Overflow](http://lmsotfy.com/so.png)

如下所示：

用桌子脱颖而出，它将给它带来独特的魅力

表语法为：

用符号分隔每个列单元格 |

和表头（第一行）乘第二行 ---

| 第1栏| 第2列|
| ------------ | ------------- |
| 图片1 | 图片2 |

输出

现在<img src="url/relativePath">，如果要使用两个图像，则只需放在图像1和图像2上

注意：如果使用多个图像仅包括更多列，则可以使用width和height属性使其看起来可读。

例

| 第1栏| 第2列|
| ------------ | ------------- |
| <img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_582,c_limit/so-logo-s.jpg" width="250"> | <img src="https://mk0jobadderjftub56m0.kinstacdn.com/wp-content/uploads/stackoverflow.com-300.jpg" width="250">|

间距无关紧要

输出图像

帮助：亚当-p

您可以这样做：

git checkout --orphan assets
cp /where/image/currently/located/on/machine/diagram.png .
git add .
git commit -m 'Added diagram'
git push -u origin assets

然后，您可以README像这样在文件中引用它：

![diagram](diagram.png)

就我而言，我使用imgur并以这种方式使用直接链接。

![img](http://i.imgur.com/yourfilename.png)

您可以使用替代的github CDN链接从README.md链接到项目中的图像（或从外部）。

该URL将如下所示：

https://cdn.rawgit.com/<USER>/<REPO>/<BRANCH>/<PATH>/<TO>/<FILE>

我的项目中有一个SVG图像，当我在Python项目文档中引用它时，它不会呈现。

项目链接

这是文件的项目链接（不呈现为图像）：

https://github.com/jongracecox/anybadge/blob/master/examples/awesomeness.svg

示例嵌入式图像：

原始链接

这是指向该文件的RAW链接（仍然不会呈现为图像）：

https://raw.githubusercontent.com/jongracecox/anybadge/master/examples/awesomeness.svg

示例嵌入式图像：

CDN连结

使用CDN链接，我可以使用（渲染为图像）链接到文件：

https://cdn.rawgit.com/jongracecox/anybadge/master/examples/awesomeness.svg

示例嵌入式图像：

这就是我能够在README.md文件和PyPi项目中使用来自项目的图像的方式reStructredText文档（此处）

我已经解决了这个问题。您只需要引用其他人的自述文件即可。

首先，您应该将图像文件上传到github代码库！然后直接引用图像文件的地址。

我通常在站点上托管图像，这可以链接到任何托管图像。只是在自述文件中扔这个。适用于.rst文件，不确定.md

.. image:: https://url/path/to/image
   :height: 100px
   :width: 200 px
   :scale: 50 %

在我来说，我想表现的打印屏幕上Github也对NPM。即使在内部使用相对路径Github，也不能在外部使用相对路径。基本上，即使我也将我的项目NPM也推进了（仅使用相同的项目readme.md，该图像也从未显示）。

我尝试了几种方法，最后这对我有用：

![Preview](https://raw.githubusercontent.com/username/project/master/image-path/image.png)

现在NPM，我可以在可以发布我的程序包的任何地方看到正确的图像。

如果您需要上传一些图片作为文档，一种不错的方法是使用git-lfs。假设您已经安装了git-lfs，请按照以下步骤操作：

1. 为每种图像类型初始化git lfs：

   git lfs *.png
   git lfs *.svg
   git lfs *.gif
   git lfs *.jpg
   git lfs *.jpeg
   

2. 创建一个用作图像位置的文件夹，例如。doc。在基于GNU / Linux和Unix的系统上，这可以通过以下方式完成：

   cd project_folder
   mkdir doc
   git add doc
   

3. 复制将任何图像粘贴到doc文件夹中。然后通过git add命令添加它们。

4. 提交并推动。

5. 这些图像可通过以下网址公开获得：

   https://media.githubusercontent.com/media/仓库中的^ github_username ^ / ^ repo ^ / ^ branch ^ / ^ image_location ^

其中：* ^github_username^是github中的用户名（您可以在配置文件页面中找到它）* ^repo_name^是存储库名称* ^branch^是上载图像的存储库分支* ^image_location in the repo^是包括图像存储文件夹的位置。

另外，您可以先上传图像，然后访问项目github页面中的位置并浏览直到找到图像，然后按download按钮，然后从浏览器的地址栏中复制粘贴网址。

从我的项目中看这作为参考。

然后，您可以使用网址使用上面提到的markdown语法包括它们：

![some alternate text that describes the image](^github generated url from git lfs^)

例如：让我们假设我们使用这张照片，然后可以使用markdown语法：

![In what order to compile the files](https://media.githubusercontent.com/media/pc-magas/myFirstEnclave/master/doc/SGX%20Compile%20workflow.png)

就是这样！

注意标记中文件名的大写，然后将PNG文件放在根目录下，并链接到文件名而无需任何路径：

![Screenshot](screenshot.png)

我只是在已经接受的答案中扩展或添加示例。

将图片放到Github仓库中后。

然后：

• 在浏览器中打开相应的Github存储库。
• 导航到目标图像文件，然后在新选项卡中打开图像。
• 复制网址
• 最后将网址插入以下模式 ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

就我而言

![In a single picture](https://raw.githubusercontent.com/shadmazumder/Xcode/master/InOnePicture.png)

哪里

• shadmazumder 是我的 username
• Xcode 是个 projectname
• master 是个 branch
• InOnePicture.png是image，在我的情况InOnePicture.png是在根目录下。

有两种简单的方法可以做到这一点，

1）使用HTML img标签，

2）！[]（保存图像的路径/image-name.png）

打开该图像时可以从浏览器中的URL复制的路径。间距可能会出现问题，因此请确保路​​径b / w的两个单词或图像名称add->％20中是否有空格。就像浏览器一样。

它们都可以使用，如果您想了解更多，可以查看我的github-> https://github.com/adityarawat29

也可以在以下位置找到此答案：https : //github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md

使用以下命令显示来自回购的图像：

前置域名：https : //raw.githubusercontent.com/

附加标志： ?sanitize=true&raw=true

使用<img />标签

• 域：raw.githubusercontent.com/
• 用户名：YourUserAccount/
• 回购：YourProject/
• 分行：YourBranch/
• 路径：DirectoryPath/
• 文件名：example.png

适用于SVG，PNG和JPEG

 - `raw.githubusercontent.com/YourUserAccount/YourProject/YourBranch/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true`

使用后，下面显示的工作示例代码：

**raw.githubusercontent.com**:
<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png?raw=true" />

<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true" />

raw.githubusercontent.com：

谢谢：-https: //stackoverflow.com/a/48723190/1815624-https : //github.com/potherca-blog/StackOverflow/edit/master/question.13808020.include-an-svg-hosted-on-github -markdown / readme.md

我找到了另一个解决方案，但有很大的不同，我会解释一下

基本上，我使用标签来显示图像，但是单击图像时我想转到另一页，这是我的操作方法。

<a href="the-url-you-want-to-go-when-image-is-clicked.com" />
<img src="image-source-url-location.com" />

如果您将其紧挨着，并用新行隔开，那么我想当您单击图像时，它会转到具有href的标签，该href指向您要重定向的其他站点。

最新

Wiki可以显示PNG，JPEG或GIF图像

现在您可以使用：

[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]

-要么-

按着这些次序：

1. 在GitHub上，导航到存储库的主页。

2. 在您的存储库名称下，单击Wiki。

3. 使用Wiki边栏，导航到要更改的页面，然后单击“编辑”。

4. 在Wiki工具栏上，单击Image。

5. 在“插入图像”对话框中，输入图像URL和替代文本（搜索引擎和屏幕阅读器使用）。
6. 单击确定。

请参阅文档。

table如果添加多个屏幕截图，请考虑使用，并希望使用表格数据对齐它们以改善可访问性，如下所示：

如果您的markdown解析器支持它，则还可以将role="presentation"WIA-ARIA属性添加到TABLE元素，并省略th标签。

逐步过程，首先创建一个文件夹（为文件夹命名），然后将要上传的一个或多个图像添加到Readme.md文件中。（您也可以将图像添加到项目的任何现有文件夹中。）现在，单击Readme.md文件的编辑图标，然后

![](relative url where images is located/refrence_image.png)  // refrence_image is the name of image in my case.

添加图像后，您可以在“预览更改”选项卡中查看更改的预览。您可以在此处找到您的图像。例如这样，就我而言，

![](app/src/main/res/drawable/refrence_image.png)

app文件夹-> src文件夹->主文件夹-> res文件夹-> drawable文件夹->并在内部drawable文件夹中找到refrence_image.png文件。要添加多个图像，您可以这样操作，

![](app/src/main/res/drawable/refrence_image1.png)
![](app/src/main/res/drawable/refrence_image2.png)
![](app/src/main/res/drawable/refrence_image3.png)

注1-确保图像文件名不包含任何空格。如果它包含空格，那么您需要为文件名之间的每个空格添加％20。最好删除空格。

注意2-您甚至可以使用HTML标签来调整图像大小，或者使用其他方法。您可以在Google上搜索更多内容。如果需要的话。

之后，编写您的提交更改消息，然后提交您的更改。

还有很多其他的方法可以做到这一点，例如创建问题等等，等等。到目前为止，这是我遇到的最好的方法。

我们可以简单地做到这一点，

• 在GitHub上创建新期刊
• 将图像拖放div到Issue 的主体上

几秒钟后，将生成一个链接。现在，复制链接或图像URL并在任何受支持的平台上使用它。

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

![Alt text]("enter repository image URL here") 

我还没有提到另一个选择。您可以简单地在您的用户或组织下创建另一个称为“资产”的存储库。将您的图像推送到此仓库中，并从其他仓库中引用它们：

![alt text](https://raw.githubusercontent.com/my-org/assets/master/folder/logo.png)

我已经在我的一个回购中完成了此操作，它很适合我。我可以独立于代码对所有项目的README映像进行版本控制，但仍将它们放在一个地方。不需要任何问题或分支或其他容易放错位置的工件。