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

Question

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

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

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

有没有办法在不将图像托管在任何第三方网络托管服务上的情况下做到这一点？

score 2790 · Accepted Answer

试试这个降价：

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

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

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

score 741 · Accepted Answer

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

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

还可以尝试以下所需的.fileExtention：

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

score 355 · Accepted Answer

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

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

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

score 224 · Accepted Answer

它比这简单得多。

只需将您的图像上传到存储库根目录，并链接到不带任何路径的文件名，如下所示：

![Screenshot](screenshot.png)

score 117 · Accepted Answer

您还可以使用简单的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>

score 73 · Accepted Answer

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

像 imgur 这样的外部 CDN 为链添加了另一个工具。嗯。
在问题跟踪器中创建一个虚拟问题是一种 hack。它会造成混乱并使用户感到困惑。将此解决方案迁移到 fork 或从 GitHub 迁移是一件痛苦的事情。
使用 gh-pages 分支会使 URL 变得脆弱。另一个在维护 gh-page 的项目上工作的人可能不知道外部的东西取决于这些图像的路径。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 是不方便的，因此作为该 help.github 页面所述，作为快捷方式按 Y 到特定提交中文件的永久链接。

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

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

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

score 34 · Accepted Answer

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

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

score 33 · Accepted Answer

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

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

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

score 29 · Accepted Answer

您还可以像任何其他格式一样在降价文件中插入动画 SVG 图像。
它可以是 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)

结果：

score 23 · Accepted Answer

创建有关添加图像的问题
通过拖放或文件选择器添加图像
然后复制图片源
现在添加![alt tag](http://url/to/img.png)到您的 README.md 文件中

完毕！

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

示例问题

score 22 · Accepted Answer

基本语法

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

这里：

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

例子：

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

这将如下所示：

score 18 · Accepted Answer

只需在<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

观察这里

score 17 · Accepted Answer

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

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

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

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

score 14 · Accepted Answer

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

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

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

score 13 · Accepted Answer

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

表语法是：

用符号分隔每列单元格|

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

| 第 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">|

间距无关紧要

输出图像

帮助者：adam-p

score 13 · Accepted Answer

您可以使用

![A test image](image.png)

![A test image]你的替代文字在哪里，是你(image.png)的图片的链接。

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

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

score 11 · Accepted Answer

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

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

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

score 10 · Accepted Answer

你可以这样做：

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)

score 9 · Accepted Answer

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

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

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

复制图像 - 您只需单击图像文件并使用Ctrl + C或可以使用截图工具将屏幕截图图像复制到剪贴板
然后，您可以Ctrl + V在编辑 Readme.md 时简单地做

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

score 9 · Accepted Answer

就是这样！

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

![Screenshot](screenshot.png)

score 8 · Accepted Answer

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

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

score 8 · Accepted Answer

您可以使用备用 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 文档中使用我的项目中的图像的方式（这里）

score 8 · Accepted Answer

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

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

score 7 · Accepted Answer

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

1) 使用 HTML img 标签，

2) ![](图片保存路径/image-name.png)

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

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

score 7 · Accepted Answer

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

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

score 7 · Accepted Answer

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

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

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

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

使用`<img />`标签

示例 url 适用于 svg、png 和 jpg，使用：

域：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 -in-markdown/readme.md

score 5 · Accepted Answer

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

为您的每种图像类型初始化 git lfs：

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

创建一个将用作图像位置的文件夹，例如。doc. 在基于 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。

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

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

![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)

score 5 · Accepted Answer

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

一旦你把图像放在你的 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是我的username
Xcode是个projectname
master是个branch
InOnePicture.png是image，在我的情况下InOnePicture.png是在根目录中。

score 5 · Accepted Answer

就我而言，我想Github在NPM. 即使使用相对路径在内部工作Github，它也不能在外部工作。基本上，即使我将我的项目也推送到NPM了（它只是使用相同readme.md的），图像也从未显示。

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

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

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

score 4 · Accepted Answer

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

37 回答 37

它比这简单得多。

基本语法

这里：

例子：

这将如下所示：

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

项目链接

原始链接

CDN链接

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

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

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

使用`<img />`标签

最新的

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

37 回答 37

它比这简单得多。

基本语法

这里：

例子：

这将如下所示：

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

项目链接

原始链接

CDN链接

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

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

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

使用<img />标签

最新的

Related

Reference

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

使用`<img />`标签