最近我加入了GitHub。我在那里主持了一些项目。
我需要在README文件中包含一些图像。我不知道该怎么做。
我搜索了一下,但得到的只是一些链接,告诉我“在web上托管图像并在README.md文件中指定图像路径”。
是否有任何方法可以在不在任何第三方网络托管服务上托管图像的情况下做到这一点?
最近我加入了GitHub。我在那里主持了一些项目。
我需要在README文件中包含一些图像。我不知道该怎么做。
我搜索了一下,但得到的只是一些链接,告诉我“在web上托管图像并在README.md文件中指定图像路径”。
是否有任何方法可以在不在任何第三方网络托管服务上托管图像的情况下做到这一点?
尝试此标记:
![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 %
我需要在README文件中包含一些图像。我不知道该怎么做这样做。
我创建了一个小向导,允许您为GitHub存储库的自述文件创建和自定义简单的图像库:请参阅ReadmeGalleryCreatorForGitHub。
该向导利用了GitHub允许img标签出现在README.md中的事实。此外,该向导还利用了将图像上传到GitHub的流行技巧,方法是将图像拖放到问题区域(如本主题的一个答案中所述)。
也可以使用相对路径,如
![Alt text](relative/path/to/img.jpg?raw=true "Title")
还可以使用所需的.fileExtetion尝试以下操作:
![plot](./directory_1/directory_2/.../directory_n/plot.png)
基本语法
![myimage-alt-tag](url-to-image)
在这里:
my image alt标记:如果未显示图像,将显示的文本。图像的url:无论您的图像资源是什么。图像的URI
例子:
![stack Overflow](http://lmsotfy.com/so.png)
如下所示:
您还可以添加带有简单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>
在我的例子中,我想在Github上显示打印屏幕,但也在NPM上显示。尽管使用相对路径在Github内部有效,但在Github之外却无法正常工作。基本上,即使我也将项目推到了NPM(它只是使用了相同的readme.md),图像也从未显示。
我尝试了几种方法,最后这对我有用:
![预览](https://raw.githubusercontent.com/username/project/master/image-path/image.png)
我现在可以在NPM或任何其他我可以发布我的包的地方正确地看到我的图像。
创建有关添加图像的问题通过拖放或文件选择器添加图像然后复制图像源现在添加![替换标签](http://url/to/img.png)到README.md文件
完成!
或者,您可以使用imgur之类的图像托管站点,获取其url并将其添加到README.md文件中,或者也可以使用一些静态文件托管。
样品问题
许多张贴的解决方案都不完整或不合我的口味。
像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 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中添加以下行:
![可选文本](../master/myFolder/image.png)
如果您需要上传一些图片用于文档,一个不错的方法是使用git-lfs。假设您已安装git-lfs,请执行以下步骤:
初始化每个图像类型的git-lfs:数字lfs*.png数字lfs*.svg数字lfs*.gifgit-lfs*.jpggit-lfs*.jpeg创建一个将用作图像位置的文件夹,例如doc。在基于GNU/Linux和Unix的系统上,这可以通过以下方式完成:cd项目文件夹mkdir文档git添加文档复制粘贴任何图像到文档文件夹。然后通过gitadd命令添加它们。提交并推送。图片可在以下url中公开获取:https://media.githubusercontent.com/media/^github_username^/^repo^/^branch^/^image_location在repo中^
哪里:*^github_username^是github中的用户名(您可以在配置文件页面中找到)*^repo_name^是存储库名称*^branch^是上载图像的存储库分支*^image_location in the repo ^是包含存储图像的文件夹的位置。
此外,您还可以先上传图像,然后访问项目github页面中的位置并浏览,直到找到图像,然后按下下载按钮,然后从浏览器的地址栏复制粘贴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)
最新的
Wiki可以显示PNG、JPEG或GIF图像
现在您可以使用:
[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]
-OR-
遵循以下步骤:
在GitHub上,导航到存储库的主页面。在存储库名称下,单击Wiki。使用wiki侧栏,导航到要更改的页面,然后单击“编辑”。在wiki工具栏上,单击“图像”。在“插入图像”对话框中,键入图像URL和替代文本(搜索引擎和屏幕阅读器使用)。单击“确定”。
参考文件。
您可以使用替代的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项目reStructedText doucmentation(此处)中使用项目中的图像
只需在README.md中添加一个<img>标记,并将相对src添加到存储库。如果您没有使用相对src,请确保服务器支持CORS。
它之所以有效,是因为GitHub支持内联html
<img src="/docs/logo.png" alt="My cool logo"/>
# My cool project and above is the logo of it
在此处观察
我们可以简单地做到这一点,
在GitHub上创建新问题在Issue的body div上拖放图像
几秒钟后,将生成一个链接。现在,复制链接或图像URL并使用任何支持的平台。
我只是在已经接受的答案上延伸或添加一个例子。
一旦您将图像放到Github存储库中。
然后:
在浏览器上打开相应的Github repo。导航到目标图像文件,然后在新选项卡中打开图像。复制url最后将url插入到以下模式![替换文本](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)
就我的情况而言
![在一张图片中](https://raw.githubusercontent.com/shadmazumder/Xcode/master/InOnePicture.png)
哪里
shadmazumder是我的用户名Xcode是项目名称master是分支InOnePicture.png是图像,在我的情况下,InOnePicture.php位于根目录中。
如果添加多个屏幕截图并希望使用表格数据对齐它们以提高可访问性,请考虑使用表格,如下所示:
如果markdown解析器支持它,您还可以将role=“presentation”WIA-ARIA属性添加到TABLE元素,并省略th标记。
你可以这样做:
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)
此答案也可在以下位置找到:https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md
使用以下方式显示回购中的图像:
前置域:https://raw.githubusercontent.com/
附加标志:?消毒=真&原始=真
使用<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?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) 使用HTML img标记,
2) ![](保存图像的路径/image-name.png)
打开图像时,可以从浏览器中的URL复制路径。可能会出现间距问题,因此请确保在路径或图像名称add->%20中是否有空格b/w两个字。就像浏览器一样。
如果你想了解更多,可以查看我的github->https://github.com/adityarawat29
用桌子突出,这会给它带来独特的魅力
表语法为:
按符号分隔每个列单元格|
表格标题(第一行)由第二行由---
|第1列|第2列||------------|-------------||图像1 |图像2|
输出
现在,如果使用两个图像,只需在图像1和图像2处放置<img src=“url/relativePath”>
注意:如果使用多个图像只是包含更多列,则可以使用width和height属性使其看起来可读。
实例
|第1列|第2列||------------|-------------||<img src=“https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_582,c_limit/so-go-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。
还有一个选项我还没有看到。您可以简单地在用户或组织下创建另一个名为“资产”的存储库。将您的图像推送到此回购,并从其他回购中引用它们:
![alt text](https://raw.githubusercontent.com/my-org/assets/master/folder/logo.png)
我在我的一次回购中做了这件事,它很适合我。我可以独立于我的代码为我的所有项目版本我的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.
添加图像后,您可以在“预览更改”选项卡中看到更改的预览。您可以在此处找到您的图像。例如像这样,在我的情况下,
![](app/src/main/res/drawable/refrence_image.png)
app文件夹->src文件夹->主文件夹->res文件夹->可绘制文件夹->和内部可绘制文件夹reference_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标记调整图像大小,或者有其他方法。你可以在谷歌上搜索更多。如果你需要的话。
之后,编写提交更改消息,然后提交更改。
还有很多其他的技巧,比如创建问题等等。到目前为止,这是我遇到的最好的方法。
在新的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)是您图像的链接。
您可以将图像放在云服务或其他在线图像托管平台上或者,如果存储库中有图像链接,则可以从存储库中提供图像链接
您还可以在存储库中创建专用于自述文件图像的特定文件夹
您还可以像任何其他格式一样在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深色/浅色主题的不同图像,请参阅本文。
非常简单:可以使用Ctrl+C/V完成
这里的大多数答案都是直接或间接地将图像上传到其他地方,然后提供链接。
只需复制任何图像并在编辑Readme.md时粘贴即可完成
复制图像-您只需单击图像文件并使用Ctrl+C,也可以使用剪切工具将截图图像复制到剪贴板然后,您可以在编辑Readme.md时简单地按Ctrl+V
Guithub将自动将其上传到user-images.githubusercontent.com,并在那里插入指向它的链接
如果你不想用这些图片“搅乱”你的分支的内容,而且链接是绝对的对你来说也不是问题,那么我建议使用一个单独的孤立分支来存储这些图片。在这种情况下,图像将与回购集成,但不包含在主要内容中。此外,您可以对较大的文件使用LFS(所有主要的git主机都支持LFS)。
可以在命令行中轻松创建孤立分支:
git checkout --orphan images
git reset --hard
cp /path/to/your/image.jpg ./image.jpg
git add --all
git commit -m "Add some images"
git checkout master
git log -n 3 --all --graph
如果一切正常,请推送新分支:
git push -u origin images
然后使用图像的原始github URL。
虽然GitHub markdown也可以添加图片,但我建议您使用HTML IMG标记GitHub标记
![me](https://github.com/samadpls)
HTML标记
<img src='https://github.com/samadpls'/>
这个对我有用!!!。
![alt text](https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true)
alt text是在图像URL不存在的情况下要显示的可选文本。
user_name是您的GitHub用户名。reponame是您的GitHub repo名称。
在最新的Github中,我尝试了以上所有方法,但未能在自述文件页面上显示图像。如果是公共回购,我发现最好的方法是对master或main分支使用githubpages,然后引用自述文件中的链接。
步骤:
在您的存储库中,转到“代码和自动化”下的设置->选择页选择回购的来源和分支,然后单击保存
现在您的repo应该托管在(https://*username*.github.io/*repone*/)上
现在,您可以通过
![Preview Image](https://*username*.github.io/*reponame*/images/logo.PNG)