在GitHub上将图像添加到README.md
问题描述 投票：1440回答：27
最近我加入了GitHub。我在那里举办了一些项目。
我需要在README文件中包含一些图像。我不知道该怎么做。
我搜索了这个，但我得到的只是一些链接告诉我“在网络上托管图像并在README.md文件中指定图像路径”。
如果没有在任何第三方网络托管服务上托管图像，有没有办法做到这一点？
27个回答
投票
试试这个降价：
我认为如果图像存储在您的存储库中，您可以直接链接到图像的原始版本。即
编辑：只是注意到链接到文章的评论，建议使用gh页面。此外，相对链接可能比我上面发布的绝对URL更好。
投票
只需将<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
观察here
投票
我需要在README文件中包含一些图像。我不知道该怎么做。
我创建了一个小向导，允许您为GitHub存储库的自述文件创建和自定义简单的图像库：请参阅ReadmeGalleryCreatorForGitHub。
该向导利用了GitHub允许img标签出现在README.md中的事实。此外，该向导利用了将图像上传到GitHub的流行技巧，方法是将它们拖放到问题区域（如本线程中的一个答案中所述）。
投票
在我的情况下，我使用imgur并以这种方式使用直接链接。
投票
我通常在网站上托管图片，这可以链接到任何托管图像。只是在自述文件中抛出这个。适用于.rst文件，不确定.md
.. image:: https://url/path/to/image
:height: 100px
:width: 200 px
:scale: 50 %
投票
我已经解决了这个问题。您只需要引用别人的自述文件即可。
首先，您应该将图像文件上传到github代码库！然后直接引用图像文件的地址。
投票
您可以使用备用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（here）
投票
你可以这样做：
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文件中引用它，如下所示：
投票
使用表格脱颖而出，它将赋予它独立的魅力
表语法是：
用符号|分隔每个列单元格
和---第二行的表头（第一行）
| col 1 | col 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"> |
间距无关紧要
输出图像
帮助：adam-p
投票
在我的情况下，我想在Github上显示一个打印屏幕，但也在qazxswpoi上显示。即使使用相对路径在NPM内工作，它也不能在它之外工作。基本上，即使我把我的项目推到Github（它只是使用相同的NPM，图像从未显示。
我尝试了几种方法，最后这对我有用：
readme.md
我现在在上或我可以发布我的包裹的任何其他地方正确地看到我的图像。
投票
如果你需要上传一些图片用于文档，一个很好的方法是使用NPM。假设您已经安装了git-lfs，请按照以下步骤操作：
- 为每种图像类型初始化git lfs： qazxsw poi
- 创建一个将用作图像位置的文件夹，例如。 git-lfs。在GNU / Linux和基于Unix的系统上，这可以通过以下方式完成：
git lfs *.png git lfs *.svg git lfs *.gif git lfs *.jpg git lfs *.jpeg - 将任何图像粘贴到doc文件夹中。然后通过
doc命令添加它们。 - 承诺并推动。
- 这些图片可在以下网址中公开获得：
repo ^中的
cd project_folder mkdir doc git add doc^ github_username ^ / ^ repo ^ / ^ branch ^ / ^ image_location
其中：* git add是github中的用户名（您可以在配置文件页面中找到它）* https://media.githubusercontent.com/media/是存储库名称* ^github_username^是上传图像的存储库分支* ^repo_name^是包含图像存储文件夹的位置。
您还可以先上传图像然后访问项目github页面中的位置并浏览直到找到图像，然后按^branch^按钮，然后从浏览器的地址栏复制粘贴网址。
从我的项目中查看^image_location in the repo^作为参考。
然后你可以使用url使用上面提到的markdown语法包含它们：
download例如：让我们假设我们使用this然后您可以使用markdown语法：
投票
您也可以使用相对路径
投票
投票
我只是在已经接受的答案中扩展或添加一个例子。
一旦你把图像放在你的Github仓库上。
然后：
- 在浏览器上打开相应的Github仓库。
- 导航到目标图像文件然后只需在新选项卡中打开图像。
 - 复制网址
 - 最后将网址插入以下模式
就我而言，它是
哪里
是我的shadmazumder是usernameXcode是projectnamemaster是branch，在我的情况下，InOnePicture.png在根目录中。
投票
这个答案也可以在：image找到
使用以下方式显示repo中的图像
prepend domain: InOnePicture.png or https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md
append flag: https://raw.githubusercontent.com/
use https://cdn.rawgit.com/ tag
Eample url works for svg, png, and jpg using:- 域名：
?sanitize=true&raw=true - 用户名：
<img /> - 回购：里海
- 科：
raw.githubusercontent.com/ - 路径：
YourUserAccount/ - 文件名：
YourProject/
适用于SVG，PNG和JPEG
YourBranch/使用后显示如下工作示例代码：
DirectoryPath/raw.GitHub user content.com:
example.png：
谢谢： - - `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" />
投票
最新
Wiki可以显示PNG，JPEG或GIF图像
现在你可以使用：
https://cdn.rawgit.com
-要么-
跟着这些步骤：
- 在GitHub上，导航到存储库的主页面。
- 在您的存储库名称下，单击Wiki。
- 使用wiki侧边栏，导航到要更改的页面，然后单击“编辑”。
- 在Wiki工具栏上，单击“图像”。
- 在“插入图像”对话框中，键入图像URL和替代文本（搜索引擎和屏幕阅读器使用）。
- 单击确定。
投票
有两种简单的方法可以做到这一点，
1）使用HTML img标签，
2）！[]（保存图像的路径/ image-name.png）
打开该图像时，您可以从浏览器中的URL复制路径。可能存在间距问题，因此请确保是否有任何空格b / w两个单词的路径或图像名称add->％20。就像浏览器一样。
它们都可以工作，如果你想了解更多，你可以查看我的github - > https://github.com/potherca-blog/StackOverflow/edit/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/readme.md
投票
我找到了另一个解决方案，但完全不同，我将解释它
基本上，我使用标签来显示图像，但我想在点击图像时转到另一个页面，这是我如何做到的。
[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]
如果你把它放在彼此旁边，用一条新线分开，我想当你点击图像时，它就会转到你想要重定向到另一个网站的href的标签。
投票
投票
如果添加多个屏幕截图并想要使用表格数据对齐它们以改善可访问性，请考虑使用https://github.com/adityarawat29，如下所示：
如果您的markdown解析器支持它，您还可以将<a href="the-url-you-want-to-go-when-image-is-clicked.com" />
<img src="image-source-url-location.com" />
WIA-ARIA属性添加到TABLE元素并省略div标记。
投票
我想使用ZenHub更新它，因为GitHub和ZenHub已经改变了它们的图形布局。
如果您安装ZenHub并允许访问您的GitHub，那么您可以在回购中导航到ZenHub选项卡并打开一个新问题。
这是table的YouTube视频发布的更新版本。
第1步：role="presentation"
第2步：从那里你可以打开attachment.th
第3步：然后从那里你可以使用自动生成的链接。这样您就不必费心为图像创建新的仓库了。
然后使用标准的MarkDown语法和提供的URL。
第4步
步骤5不要忘记关闭问题草稿而不是实际提交。图片网址仍应正常运行！
投票
- 您可以创建新问题
- 上传（拖放）图像到它
- 复制图像URL并将其粘贴到README.md文件中。
这是一个详细的youTube视频详细解释了这个：
投票
It's much simpler than that.
只需将您的图像上传到存储库根目录，并链接到没有任何路径的文件名，如下所示：
投票
您还可以使用简单的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>
投票
许多发布的解决方案都不完整或不符合我的口味。
- 像imgur这样的外部CDN为链条增加了另一种工具。咩。
- 在问题跟踪器中创建虚拟问题是一个黑客。它会造成混乱并使用户感到困惑。将此解决方案迁移到fork或GitHub是一件痛苦的事。
- 使用gh-pages分支使URL变得脆弱。另一个从事项目维护gh页面的人可能不知道外部的东西取决于这些图像的路径。 gh-pages分支在GitHub上具有特定的行为，这对于托管CDN图像不是必需的。
- 在版本控制中跟踪资产是一件好事。随着项目的发展和变化，它是一种更可持续的方式来管理和跟踪多个用户的变化。
- 如果图像适用于软件的特定版本，则最好链接不可变图像。这样，如果稍后更新图像以反映软件的更改，则阅读该修订版自述文件的任何人都将找到正确的图像。
在this gist的启发下，我首选的解决方案是使用资产分支，并将永久链接用于特定修订。
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中：
EG
要始终在资产分支上显示最新图像，请使用assets代替sha：
投票
将您的图像（image.png）提交到文件夹（myFolder）并在README.md中添加以下行：
投票
- 创建有关添加图像的问题
- 通过拖放或文件选择器添加图像
- 然后复制图像源
- 现在将
添加到README.md文件中
完成！
或者你可以使用像imgur这样的图像托管网站并获取它的URL并将其添加到您的README.md文件中，或者您也可以使用一些静态文件托管。
投票
Basic Syntax
这里：
- my-image-alt-tag：如果未显示图像，将显示的文本。
- url-to-image：无论您的图像资源是什么。图像的URI
例：
这将如下所示：
最新问题
- 我可以将自定义元标签添加到网络摄像头捕获的 JavaScript 图像文件中吗？
- 在React CRA中，Azure Map外部独立脚本（azure-maps-geolocation-control.js）无法读取Azure Map SDK的命名空间
- C# 序列化隐藏包含子类的列表的数组名称
- 如何在springbatch测试中的when().thenReturn()语句中模拟私有方法
- 如果返回值已经存在于返回列中，如何获取列中的下一行值？
- 从Payara 5迁移到Payara6版本（6.2024.4）期间出现错误
- 如何获取大查询表中的最后修改条目
- ec2 中的 redis 堆栈性能下降，该怎么办？
- 访问http状态代码常量
- 命令在 shell=True 时完美运行，但如果设置为 False则不能运行
- 创建 SQL 索引的最佳时机是什么？
- Dijkstra算法的launch函数的细化
- 如何将嵌套编号列表格式化为度数？
- 更新 python ui 而无需重写所有按钮事件
- XFL - ./bin/*.dat 文件是什么？
- AWS CDKglue-alpha 作业：如何在 `extraPythonFiles` 中导入模块？
- 关闭 RecognizesAccessKey 的 WPF DataGrid
- 如何从flutter应用程序中删除Request_install_package权限？
- 大字体的跨度会在段落上产生很大的“段落后的空间”
- 在打开的 Bootstrap 4 模式中更新选项/配置