到README.md图像添加GitHub上(Add images to README.md on G

2019-07-18 15:34发布

最近我加入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:

您也可以通过简单的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 6:

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

  • 像imgur外部CDN增加了另一个工具链。 咩。
  • 在创建问题跟踪虚拟的问题是一个黑客。 它创建混乱和迷惑用户。 这是一个痛苦的这一解决方案迁移到一个岔路口,或关闭GitHub上。
  • 使用GH-页面分支使得网址脆。 另一个对项目保持GH-页面可能不知道的东西外工作的人所依赖的路径,这些图像上。 生长激素的页面分公司拥有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.

构建“固定链接”到本次修订的形象,并在降价包装它:

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

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

要始终显示在资产分支的最新图像,用assets来代替沙:

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



Answer 7:

提交您的文件夹(MyFolder文件 )图像(image.png),并添加下面的行放在README.md:

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



Answer 8:

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

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

完成!

另外,您可以使用一些图片托管网站,如imgur并得到它的URL并在README.md文件中添加它,也可以使用托管过一些静态文件。

示例问题



Answer 9:

基本语法

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

这里:

  1. 我-图像ALT标签:如果不显示图像将显示文本。
  2. 网址到影像:无论你的图像资源。 图像的URI

例:

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

这将如下所示:



Answer 10:

只是一个补充<img>标签,就可以README.md相对SRC到存储库。 如果你不使用相对SRC,确保服务器支持CORS。

它的工作原理是因为GitHub的支持直列HTML

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

注意这里



Answer 11:

我需要在我的README文件中的一些图片。 我不知道该怎么做。

我创建了一个小的向导,允许您创建和自定义简单的图像画廊为您的GitHub库的自述:见ReadmeGalleryCreatorForGitHub 。

该向导采取的事实,GitHub的允许的img标签在发生优点README.md 。 此外,向导利用通过在问题区域drag'n'dropping它们(如在此线程其中一个答案已经提到)上传图片到GitHub上的招人喜爱的。



Answer 12:

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

首先,你应该上传图片文件的GitHub代码库! 然后直接引用图像文件的地址。





Answer 13:

在我来说,我使用imgur和使用直接链接这种方式。

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


Answer 14:

您可以使用替代GitHub的CDN链接链接到图片,从README.md(或外部)项目。

该网址看起来像这样:

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

我平时主办的网站上的图像,这可以链接到任何托管的图片。 就在自述折腾这个。 适用于.rst文件,不知道.md

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


Answer 16:

在我来说,我想表明在打印屏幕Github也对NPM 。 即使使用相对路径内正在Github ,它不工作在它之外。 基本上,就算我把我的项目NPM以及(简单的使用相同readme.md ,像从来没有显示。

我尝试了一些办法,在这到底是对我工作:

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

我现在可以正确地看到我的形象NPM或其他任何地方,我可以发表我的包。



Answer 17:

如果你需要上传一些图片文件,一个很好的方法是使用混帐LFS 。 你已经安装了GIT-LFS Asuming请按照下列步骤操作:

  1. 为您的每个图像类型Intialize混帐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. 复制任何图像粘贴到文档文件夹中。 随后通过添加这些git add命令。

  4. 提交和推送。

  5. 这些图像是公开可以在以下网址:

    https://media.githubusercontent.com/media/ ^ github_username ^ / ^回购^ / ^分支^ / ^映像位置在回购^

其中:* ^github_username^是在GitHub上的用户名(你可以找到它在个人资料页)* ^repo_name^是仓库名* ^branch^是图像上传*库分支^image_location in the repo^是包括该图像存储在文件夹中的位置。

您也可以先上传的图片然后访问在项目的GitHub页面的位置和导航通过,直到找到然后将图像按download按钮,然后复制粘贴从浏览器的地址栏中的网址。

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

然后你可以使用URL中使用降价语法上面提到的,包括他们:

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

例如:让我们假设我们使用这张照片 。然后你可以使用降价语法:

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


Answer 18:

就在这个作品!

照顾有关标签大写的文件名,并把PNG文件器InRoot,并链接到文件名没有任何路径:

![Screenshot](screenshot.png)


Answer 19:

我只是延长或增加了个例子,已经接受的答案。

一旦你已经把图片上的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
  • Xcodeprojectname
  • masterbranch
  • InOnePicture.pngimage ,在我的情况下InOnePicture.png是在根目录下。


Answer 20:

你可以这样做:

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

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

使用回购显示图像:

前置域: https://raw.githubusercontent.com/或https://cdn.rawgit.com/

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

使用<img />标签

Eample url works for svg, png, and jpg using:
  • 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?sanitize=true&raw=true" />

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

**https://cdn.rawgit.com**:
<img src="https://cdn.rawgit.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png" />

<img src="https://cdn.rawgit.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg" />

raw.githubusercontent.com:

https://cdn.rawgit.com

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



Answer 22:

使用表格中脱颖而出,它会给单独的魅力吧

表语法是:

由符号分离各列电池|

和表头(第一行)由第二行由---


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

产量


现在只是把<img src="url/relativePath">在图像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"> |

间距剂量没有关系

输出图像

:通过帮助亚当-P



Answer 23:

最新

维基可以显示PNG,JPEG或GIF图像

现在你可以使用:

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

-要么-

跟着这些步骤:

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

  2. 在您的存储库的名称,单击维基。

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

  4. 在维基工具栏上,单击图像

  5. 在“插入图片”对话框中,键入图片网址和alt文本(这是使用搜索引擎和屏幕阅读器)。
  6. 单击确定。

请参阅文档 。



Answer 24:

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

  • 建立在GitHub上一个新的问题
  • 拖在身上掉落的图像div发行

几秒钟后,一个链接将被生成。 现在,复制链接或图片的网址,并使用任何支持的平台。



Answer 25:

考虑使用一个table ,如果添加多个屏幕截图,并希望使用改进的辅助表格数据进行对齐,如下所示:

如果你的降价解析器支持它,你还可以添加的role="presentation" WIA-ARIA属性表元素和省略th标签。



Answer 26:

有2个可以做这个简单的方法,

1)使用HTML img标签,

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

路径将可以在浏览器的网址复制,而你已经打开的图像。 有可能是一个问题会出现间距所以一定要确保,如果有任何空间的B / W两个新的路径的话或图像名称添加 - >%20。 就像浏览器做。

他们都将工作,如果你想了解更多,您可以检查我的github - > https://github.com/adityarawat29



Answer 27:

我想更新此使用ZenHub,因为GitHub的和ZenHub已经改变了图形化的布局。

如果安装ZenHub并允许访问您的GitHub上,那么你就可以在你的回购导航到ZenHub标签一次,然后打开一个新的问题。

这是一个更新版本艾哈迈德Amji旗下YouTube视频发布。

步骤1:

第2步:从那里你可以打开附件。

第3步:然后从那里你可以使用自动生成的链接。 这样,您就不必与只为图像创建一个新的回购打扰。

然后使用标准降价语法与提供的URL。

第4步

![alt text](image URL from ZenHub issue)

第5步 ,不要忘记关闭问题,草案并没有真正提交。 图像URL应该仍然正常工作!



文章来源: Add images to README.md on GitHub