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

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

我需要在我的自述文件中包含一些图像。我不知道如何做到这一点。

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

有没有办法做到这一点,而无需在任何第三方网络托管服务上托管图像?

1895687 次浏览

试试这个Markdown:

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

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

![alt text](https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true)
  • 您可以创建一个新问题
  • 上传(拖放)图像到它
  • 复制图像URL并将其粘贴到README.md文件中。

这里有一个详细的youtube视频详细解释了这一点:

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

我通常在网站上托管图像,这可以链接到任何托管图像。只需将其放入自述文件中。适用于.rst文件,不确定.md

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

我需要在自述文件中包含一些图像。我不知道如何这样做

我创建了一个小向导,允许您为GitHub存储库的自述文件创建和自定义简单的图像库:请参阅自述画廊Creator For G it Hub

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

在此处输入图片描述

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

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

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

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

基本语法

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

这里:

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

示例:

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

这将如下所示:

堆栈溢出图像通过alamin

您还可以使用简单的超文本标记语言添加图像:

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

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

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



在此处输入图片描述

在此处输入图片描述

比那简单多了。

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

![Screenshot](screenshot.png)

在我的例子中,我想在GithubNPM上显示一个打印屏幕。即使使用相对路径在Github内工作,它在它之外不起作用。基本上,即使我把我的项目也推到NPM(它只是使用相同的readme.md,图像永远不会显示。

我尝试了几种方法,最后这对我有用:

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

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

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

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

成交!

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

示例问题

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

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

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

  • 像imgur这样的外部CDN为链添加了另一个工具。
  • 在问题跟踪器中创建虚拟问题是一种黑客行为。它会造成混乱并混淆用户。将此解决方案迁移到分叉或关闭GitHub是一种痛苦。
  • 使用gh页面分支会使URL变得脆弱。在维护gh页面的项目中工作的另一个人可能不知道外部的东西取决于这些图像的路径。gh页面分支在GitHub上有一个特定的行为,这对于托管CDN图像不是必需的。
  • 在版本控制中跟踪资产是一件好事。随着项目的发展和变化,这是一种更可持续的方式来管理和跟踪多个用户的变化。
  • 如果某个映像适用于软件的特定修订版,则最好链接一个不可变的映像。这样,如果稍后更新映像以反映对软件的更改,则任何阅读该修订版自述文件的人都会找到正确的映像。

这一要点启发,我更喜欢的解决方案是使用资产分支特定修订的永久链接

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

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

然而,手动查找提交SHA是不方便的,因此作为快捷方式,按Y键到特定提交正如help.github页面所说。中的文件的永久链接

若要始终在资产分支上显示最新映像,请使用blob URL:

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

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

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

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

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

  1. 为每个图像类型初始化git lfs:

    git lfs *.pnggit lfs *.svggit lfs *.gifgit lfs *.jpggit lfs *.jpeg
  2. Create a folder that will be used as image location eg. doc. On GNU/Linux and Unix based systems this can be done via:

    cd project_foldermkdir docgit add doc
  3. Copy paste any images into doc folder. Afterwards add them via git add command.

  4. Commit and push.

  5. The images are publicly available in the following url:

    https://media.githubusercontent.com/media/^github_username^/^repo^/^branch^/^image_location in the repo^

Where:* ^github_username^ is the username in github (you can find it in the profile page)* ^repo_name^ is the repository name* ^branch^ is the repository branch where the image is uploaded* ^image_location in the repo^ is the location including the folder that the image is stored.

Also you can upload the image first then visit the location in your projects github page and navigate through until you find the image then press the download button and then copy-paste the url from the browser's address bar.

Look this from my project as reference.

Then you can use the url to include them using the markdown syntax mentioned above:

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

最新

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

现在您可以使用:

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

-OR-

遵循这些步骤:

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

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

  3. 使用wiki侧边栏,导航到要更改的页面,然后单击编辑。

  4. 在wiki工具栏上,单击图片

  5. 在“插入图像”对话框中,键入图像URL和alt文本(由搜索引擎和屏幕阅读器使用)。

  6. 点击OK。

参考文档

您可以使用替代的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

嵌入图像示例:image

原始链接

这是文件的RAW链接(仍然不呈现为图像):

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

嵌入图像示例:image

cdn链路

使用CDN链接,我可以使用(呈现为图像)链接到文件:

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

嵌入图像示例:image

这就是我如何能够在我的README.md文件中使用我的项目中的图像,以及在我的PyPi项目restructredText douc的方式(这里

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

观察这里

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

  • 在GitHub上创建新问题
  • 在问题的主体div上拖放图像

几秒钟后,将生成一个链接。现在,复制链接或图像URL并将其用于任何支持的平台。

这很有效!!

注意你的文件名在标签中大写并将PNG文件放在root中,并链接到没有任何路径的文件名:

![Screenshot](screenshot.png)

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

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

然后:

  • 在浏览器上打开相应的Github存储库。
  • 导航到目标图像文件然后只需在新选项卡中打开图像。在新标签中打开图像
  • 复制URL从浏览器选项卡复制URL
  • 最后将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
  • Xcodeprojectname
  • masterbranch
  • InOnePicture.pngimage,在我的情况下InOnePicture.png在根目录中。

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

下午茶

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

你可以只做:

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

然后你可以像这样在README文件中引用它:

![diagram](diagram.png)

这个答案也可以在这里找到:https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md

使用以下方法显示repo中的图像:

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

追加标志:#0

使用<img />标签

Eample 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

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

1)使用超文本标记语言img tag,

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

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

两者都可以,如果你想了解更多,可以查看我的github->https://github.com/adityarawat29

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

表语法是:

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

和表格标题(第一行)由第二行由---


|col1|col2|
|------------|-------------|
|图片1|图片2|

输出

在此处输入图片描述


现在只需将#0放在图像1和图像2,如果您使用两个图像


注意:如果使用多个图像只是包含更多列,您可以使用宽度和高度属性使其看起来可读。

示例


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

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

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

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

如果你把它放在彼此旁边,用新行分隔,我想当你点击图像时,它会转到标签,该标签具有href到你要重定向的其他站点。

从上传文件选项在存储库中添加图像,然后在README文件中

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

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

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

我已经在我的repos中完成了这一点,它很适合我。我可以独立于我的代码为我的所有项目版本我的README映像,但仍然将它们全部保存在一个地方中。不需要问题、分支或其他容易放错位置的工件。

如果您想显示托管在任何网站上的图像(例如url是“http:// abc.def.com/folder/image.jpg”),那么在您的README.md文件中使用以下语法:

![alt text](<http:// abc.def.com/folder/image.jpg>)

  • 只需浏览浏览器中的图像(可能是通过单击图像)。它可以是任何网站,包括您的或其他人的github托管图像。
  • 从浏览器地址栏复制url,这是您的“image_url”要在上面提到的语法中使用。

对于托管在您自己的github存储库中的图像,除了上述url格式外,您还可以使用相对路径
![alt text](<path_relative_to_current_github_location/image.jpg>)


如果图像与README.md文件位于同一文件夹中(相对路径url的特殊情况),则可以使用:
![alt text](<image.jpg>)


请注意包含url的尖括号"<"">"。有时这些是url工作所必需的。

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

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

添加图像后,您可以在“预览更改”中看到更改的预览tab.you将在此处找到您的图像。比如说像这样,在我的情况下,

![](app/src/main/res/drawable/refrence_image.png)
应用程序文件夹->src文件夹->主文件夹->res文件夹->可绘制文件夹->和内部可绘制文件夹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-您甚至可以使用超文本标记语言标记调整图像大小,或者还有其他方法。如果你需要的话

在此之后,编写提交更改消息,然后提交更改。

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

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

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

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

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

GitHub将为您创建一个链接,格式为:

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

或者,在文件的底部,它说“通过拖放、选择或粘贴附加文件”。如果您单击那个,它会为您提供直接上传文件的选项,或者您可以粘贴它!

您可以使用

![A test image](image.png)

其中![A test image]是您的alt文本,(image.png)是指向图像的链接。


您可以在云服务或其他在线图像托管平台上拥有图像或者您可以从存储库中提供图像链接,如果它在repo中


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

您还可以像任何其他格式一样在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暗/亮主题的不同图像,请参阅这篇文章

对于带有大小管理选项的上传图像:

<img src="a.jpg" alt="J" width="200"/>

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

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

它可以通过复制任何图像并在编辑时粘贴它来完成Readme.md

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

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

如果你不想用这些图像“弄乱”你分支的内容,并且链接是绝对的对你来说不是问题,那么我建议使用单独的孤立分支来存储这些图像。在这种情况下,图像将与存储库集成,而不包含在主要内容中。此外,您可以对较大的文件使用LFS(所有领先的git主机都支持LFS)。

您可以在命令行中轻松创建孤儿分支:

git checkout --orphan imagesgit reset --hardcp /path/to/your/image.jpg ./image.jpggit add --allgit commit -m "Add some images"git checkout mastergit log -n 3 --all --graph

如果一切正常,推动新分支:

git push -u origin images

然后使用图像的原始github URL。

您也可以将图像放置在读取我文件中的适当部分。

只需README.md文件里面写下代码在这里[Anyname](图片路径)

![Screenshot](screenshot1.png)

虽然GitHub Markdown也可以添加图片,但我建议你使用超文本标记语言IMG标记
GitHub Markdown

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

超文本标记语言

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

这个对我有用!!!!

alt text

alt文本是您要显示的替代文本,以防图像URL不存在。

user_name是您的GitHub用户名。reponame是您的git中心存储库名称。

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

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