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

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

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

我search了这个,但我得到的是一些链接,告诉我“在Web上托pipe图像,并在README.md文件中指定图像path”。

有没有办法做到这一点,而无需在networking上托pipe图像?

试试这个markdown:

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

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

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

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

你也可以使用相对path

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

您可以创build一个新的问题,上传图像到它,然后将这些图像附加到您的文件中,如本文所述

GitHub技巧:上传图片和实时演示

您还可以添加简单的HTML标签的图像:

 <p align="center"> <img src="your_relative_path_here" width="350"/> <img src="your_relative_path_here_number_2_large_name" width="350"/> </p> 

这比这简单得多。

只需将您的映像上传到存储库根目录,然后链接到没有任何path的文件名,如下所示:

 ![Screenshot](screenshot.png) 
  • 创build一个关于添加图像的问题
  • 通过拖放或文件select器添加图像
  • 然后复制图像源

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

完成!

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

示例问题

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

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

该向导利用了GitHub允许在README.md发生img标签的README.md 。 此外,该向导利用上传图片到GitHub的stream行技巧,方法是将其拖放到问题区域(如本主题中的答案之一所述)。

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

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

基本语法

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

这里:

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

例:

 ![stack Overflow](so.png) 

这将如下所示:

由alamin堆栈溢出图像

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

  • 像imgur这样的外部CDN增加了另一个工具链。 咩。
  • 在问题跟踪器中创build一个虚拟问题是一个黑客攻击。 它会造成混乱,迷惑用户。 把这个解决scheme迁移到fork,或者closuresGitHub是一件很痛苦的事情。
  • 使用gh-pages分支会使URL变得脆弱。 另一个维护gh页面的项目的人可能不知道外部的东西取决于这些图像的path。 gh-pages分支在GitHub上有一个特殊的行为,这对托pipeCDN图像来说是不必要的。
  • 在版本控制中跟踪资产是一件好事。 随着项目的发展和变化,这是一个更可持续的方式来pipe理和跟踪多个用户的变化。
  • 如果图像适用于软件的特定版本,则最好链接不可变的图像。 这样,如果图像稍后更新以反映对软件的更改,则读取该版本自述文件的任何人都将find正确的图像。

我的首选解决scheme是受这个要求的启发,就是使用一个永久性资产分支 来进行特定的修改

 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. 

构build这个版本的“永久链接”,并将其包装在Markdown中:

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

例如

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

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

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

我通常在网站上托pipe图片,这可以链接到任何托pipe图片。 只是在自述中折腾了这一点。 适用于.rst文件,不知道.md

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

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

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

在这里输入图像说明

在这里输入图像说明

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

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

在我的情况下,我想在Github上显示一个打印屏幕,但也要在NPM 。 尽pipe使用相对path在Github内部工作,但它并不在其外部。 基本上,即使我把我的项目也推到了NPM (它只是使用相同的readme.md ,图像从未显示过。

我尝试了几个方法,最后这是为我工作的:

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

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