在GitHub上将图像添加到README.md

Question

最近我加入了GitHub.我在那里举办了一些项目.

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

我搜索了这个,但我得到的只是一些链接告诉我"在网络上托管图像并在README.md文件中指定图像路径".

如果没有在任何第三方网络托管服务上托管图像,有没有办法做到这一点？

Answer 1

试试这个降价:

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

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

![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

编辑:只是注意到链接到文章的评论,建议使用gh页面.此外,相对链接可能比我上面发布的绝对URL更好.

Answer 2

您也可以使用相对路径

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

Answer 3

• 您可以创建新问题
• 上传(拖放)图像到它
• 复制图像URL并将其粘贴到README.md文件中.

这是一个详细的youTube视频详细解释了这个:

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

Answer 4

它比那简单得多.

只需将您的图像上传到存储库根目录,并链接到没有任何路径的文件名,如下所示:

![Screenshot](screenshot.png)

Answer 5

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

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

只需在编辑 Readme.md 时复制任何图像并粘贴即可，非常简单

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

Guithub 会自动将其上传到 user-images.githubusercontent.com 并在那里插入一个链接

Answer 6

您还可以像任何其他格式一样在 Markdown 文件中插入动画 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)

结果：

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

Answer 7

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

Answer 8

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

• 像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 needed below.

构建此图像修订版的"永久链接",并将其包装在Markdown中:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/{sha}/cat.png)

例如

![Cat](https://raw.githubusercontent.com/paulmelnikow/zsh-startup-timer/3923c60fc66d4223ccf063d169ccf2ff167b1270/cat.png)

要始终在资产分支上显示最新图像,请使用assetssha代替:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/assets/cat.png)

Answer 9

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

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

Answer 10

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

• 然后复制图像源

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

完成!

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

样品问题

Answer 11

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

在这里观察

Answer 12

基本语法

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

这里:

1. my-image-alt-tag:如果未显示图像,将显示的文本.
2. url-to-image:无论您的图像资源是什么.图像的URI

例:

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

这将如下所示:

Answer 13

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

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

After adding image, you can see preview of changes in the, "Preview Changes" tab.you will find your image here. for example like this, In my case,

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

app folder -> src folder -> main folder -> res folder -> drawable folder -> and inside drawable folder refrence_image.png file is located. For adding multiple images, you can do it like this,

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

Note 1 - Make sure your image file name does not contain any spaces. If it contain spaces then you need to add %20 for each space between the file name. It's better to remove the spaces.

Note 2 - you can even resize the image using HTML tags, or there are other ways. you can google it for more. if you need it.

After this, write your commit changes message, and then commit your Changes.

There are many other hacks of doing it like, create a issue and etc and etc. By far this is the best method that I have came across.

Answer 14

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

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

该向导利用了GitHub允许img标签出现的事实README.md.此外,该向导利用了将图像上传到GitHub的流行技巧,方法是将它们拖放到问题区域(如本线程中的一个答案中所述).

Answer 15

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

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

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

Answer 16

无需编写任何代码。GitHub 上的自述文件现在drag支持drop

1. 打开README.md文件
2. 单击编辑此文件
3. 拖放您的图像
4. 单击提交更改

Answer 17

虽然 GitHub markdown 也可以添加图片我建议你使用 HTML IMG 标签
GitHub Markdown

![me](https://github.com/samadpls)

HTML标签

<img src='https://github.com/samadpls'/>

Answer 18

在我的情况下,我使用imgur并以这种方式使用直接链接.

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

Answer 19

您可以使用备用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 doucmentation(这里)

Answer 20

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

表语法为：

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

表标题（第一行）第二行 ---

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

Answer 21

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

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

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

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

Answer 22

您可以使用

![A test image](image.png)

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

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

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

Answer 23

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

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

Answer 24

您可以这样做：

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)

Answer 25

此答案也可以在以下位置找到：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：

谢谢： - /sf/answers/3410623331/ - https://github.com/potherca-blog/StackOverflow/edit/master/question.13808020.include-an-svg-hosted-on-github -in-markdown/readme.md

Answer 26

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

1) 使用 HTML img 标签，

2) 

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

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

Answer 27

我通常在网站上托管图片,这可以链接到任何托管图像.只是在自述文件中抛出这个.适用于.rst文件,不确定.md

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

Answer 28

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

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

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

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

Answer 29

如果您需要上传一些图片作为文档，一种不错的方法是使用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语法：

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

Answer 30

就是这样！

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

![Screenshot](screenshot.png)

Answer 31

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

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

然后：

• 在浏览器上打开相应的 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是在根目录中。

Answer 32

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

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

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

如果您将它们放在一起，并用新行分隔，我想当您单击图像时，它会转到包含您要重定向的其他网站的 href 的标签。