如何将图像添加到 GitHub 上的 README.md？

试试这个降价：

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

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

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

---

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

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

还可以使用所需的 .fileExtention 尝试以下操作：

![plot](./directory_1/directory_2/.../directory_n/plot.png)

---

您可以创建一个新问题

上传（拖放）图像到它

复制图像 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 为链添加了另一个工具。嗯。

在问题跟踪器中创建一个虚拟问题是一种 hack。它会造成混乱并使用户感到困惑。将此解决方案迁移到 fork 或从 GitHub 迁移是一件痛苦的事情。

使用 gh-pages 分支会使 URL 变得脆弱。另一个在维护 gh-page 的项目上工作的人可能不知道外部的东西取决于这些图像的路径。 gh-pages 分支在 GitHub 上具有特定的行为，这对于托管 CDN 图像不是必需的。

在版本控制中跟踪资产是一件好事。随着项目的发展和变化，它是一种更可持续的方式来管理和跟踪多个用户的变化。

如果图像适用于软件的特定版本，则最好链接不可变图像。这样，如果稍后更新映像以反映对软件的更改，任何阅读该修订版自述文件的人都会找到正确的映像。

受 this gist 启发，我首选的解决方案是使用 assets 分支，并带有特定修订的永久链接。

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 是不方便的，因此作为该 help.github 页面所述，作为快捷方式按 Y 到特定提交中文件的永久链接。

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

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

（来自同一 GitHub 帮助页面 File views show the latest version on a branch）

---

您也可以像任何其他格式一样在降价文件中插入 animated SVG images。
它可以很好地替代 GIF 图像。

![image description](relative/path/in/repository/to/image.svg)
OR
<img src="relative/path/in/repository/to/image.svg" width="128"/>

示例（假设图像位于存储库的 assets 目录中）：

![My animated logo](assets/my-logo.svg)

结果：

_{要使用基于 GitHub 深色/浅色主题的不同图像，请参阅 this post。}

---

将您的图像 (image.png) 提交到文件夹 (myFolder) 中，并在 README.md 中添加以下行：

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

---

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

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

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

https://i.stack.imgur.com/sMUbB.png

---

非常简单：可以使用 Ctrl + C/V 完成

这里的大多数答案直接或间接涉及将图像上传到其他地方然后提供指向它的链接。

只需复制任何图像并在编辑 Readme.md 时粘贴它就可以非常简单地完成

复制图像 - 您只需单击图像文件并使用 Ctrl + C 或可以使用截图工具将屏幕截图图像复制到剪贴板

然后，您可以在编辑 Readme.md 时简单地执行 Ctrl + V

Guithub 会自动将其上传到 user-images.githubusercontent.com 并在此处插入指向它的链接

---

创建有关添加图像的问题

通过拖放或文件选择器添加图像

然后复制图片源

现在将  添加到您的 README.md 文件中

完毕！

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

Sample issue

---

基本语法

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

这里：

my-image-alt-tag ：如果未显示图像，将显示的文本。 url-to-image ：无论您的图像资源是什么。图片的URI

例子：

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

这将如下所示：

https://i.stack.imgur.com/h9beB.png

---

您现在可以在编辑自述文件时拖放图像。

Github 将为您创建一个链接，其格式如下：

https://user-images.githubusercontent.com/******/********.file_format

或者，在文件底部显示“通过拖放、选择或粘贴附加文件”。如果你点击那个，它会给你一个直接上传文件的选项，或者你可以粘贴它！

---

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

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

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

观察here

---

您可以使用

![A test image](image.png)

其中 ![A test image] 是您的替代文字，(image.png) 是您的图片的链接。

您可以将图像放在云服务或其他在线图像托管平台上，或者如果它在 repo 中，您可以提供来自存储库的图像链接

您还可以在存储库中创建一个专用于自述文件图像的特定文件夹

---

一步一步的过程，首先创建一个文件夹（命名您的文件夹），然后在 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 标记调整图像大小，或者还有其他方法。你可以用谷歌搜索更多。如果你需要它。

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

还有很多其他的技巧，比如创建问题等等。到目前为止，这是我遇到的最好的方法。

---

用桌子来突出，它会给它单独的魅力

表语法是：

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

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

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

输出

https://i.stack.imgur.com/qsMwy.jpg

如果您使用两张图片，现在只需将 <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"> |

间距无关紧要

输出图像

https://i.stack.imgur.com/sXElI.jpg

帮助：adam-p

---

在新的 Github UI 中，这对我有用 -

示例 - 在文件夹 (myFolder) 中提交您的 image.png，并在您的 README.md 中添加以下行：

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

---

你可以这样做：

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)

---

就是这样！

注意标签中的文件名大写并将PNG文件放入root，并链接到没有任何路径的文件名：

![Screenshot](screenshot.png)

---

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

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

---

我已经解决了这个问题。你只需要参考别人的自述文件。

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

https://i.stack.imgur.com/9guCz.jpg

https://i.stack.imgur.com/E0ptE.jpg

---

在我的情况下，我使用 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

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

原始链接

这是文件的 RAW 链接（仍然不渲染为图像）：

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

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

CDN链接

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

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

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

这就是我能够在我的 README.md 文件和我的 PyPi 项目 reStructredText doucmentation (here) 中使用我的项目中的图像的方式

---

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

1) 使用 HTML img 标签，

2) 

当您打开该图像时，您可以从浏览器中的 URL 复制路径。可能存在间距问题，因此请确保两个单词路径或图像名称 add-> %20 中是否有空格。就像浏览器一样。

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

---

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

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

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

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

使用 标签

域名：raw.githubusercontent.com/

用户名：YourUserAccount/

回购：你的项目/

分支：YourBranch/

路径：目录路径/

文件名：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://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png?raw=true

https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true

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

---

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

一旦你把图像放在你的 Github repo 上。

然后：

在浏览器上打开相应的 Github 存储库。

导航到目标图像文件然后只需在新选项卡中打开图像。

复制网址

最后将 url 插入以下模式！[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 是我的用户名

Xcode 是项目名称

master 是分支

InOnePicture.png 是图像，在我的情况下 InOnePicture.png 位于根目录中。

---

就我而言，我想在 Github 和 NPM 上显示打印屏幕。即使使用相对路径在 Github 内有效，但在它之外却无法使用。基本上，即使我也将我的项目推送到 NPM（它只是使用相同的 readme.md，图像也永远不会显示。

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

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

我现在可以在 NPM 或其他任何可以发布我的包的地方正确地看到我的图像。

---

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

为您的每种图像类型初始化 git lfs： git lfs *.png git lfs *.svg git lfs *.gif git lfs *.jpg git lfs *.jpeg 创建一个将用作图像位置的文件夹，例如。博士。在基于 GNU/Linux 和 Unix 的系统上，这可以通过以下方式完成： cd project_folder mkdir doc git add doc 将任何图像复制粘贴到 doc 文件夹中。然后通过 git add 命令添加它们。提交并推动。这些图像在以下 url 中公开可用：https://media.githubusercontent.com/media/^github_username^/^repo^/^branch^/^image_location in the repo^

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

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

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

然后你可以使用上面提到的 markdown 语法使用 url 来包含它们：

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

例如：假设我们使用 this photo 那么您可以使用 markdown 语法：

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

---

我找到了另一种解决方案，但完全不同，我会解释它

基本上，我使用标签来显示图像，但我想在单击图像时转到另一个页面，这就是我的做法。

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

如果你把它放在彼此旁边，用新行分隔，我猜当你点击图片时，它会转到包含你要重定向的另一个站点的 href 的标签。

---