关于git：在GitHub上将图像添加到README.md


Add images to README.md on GitHub

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

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

我搜索了一下，但我得到的只是一些链接，这些链接告诉我"在Web上托管图像，并在readme.md文件中指定图像路径"。

有没有任何方法可以做到这一点，而不把图片托管在任何第三方Web托管服务上？

相关讨论

尝试此降价：

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

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

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

号

编辑：刚刚注意到链接到建议使用GH页面的文章的评论。另外，相对链接可能比我上面发布的绝对URL更好。

相关讨论

您也可以使用类似的相对路径

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

。

相关讨论

  • 您可以创建新问题
  • 上载(拖放)图像到它
  • 复制图像URL并将其粘贴到readme.md文件中。

下面是一个详细的YouTube视频，详细解释了这一点：

https://www.youtube.com/watch？V=NVPUDZ5PL4

相关讨论

比那简单多了。

只需将您的图像上载到存储库根目录，并链接到不带任何路径的文件名，如下所示：

1
![Screenshot](screenshot.png)
相关讨论

您还可以添加带有简单HTML标记的图像：

1
2
3
4
5
<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图像来说是不必要的。
  • 在版本控制中跟踪资产是一件好事。随着项目的增长和变化，这是一种更可持续的方式来管理和跟踪多个用户的变化。
  • 如果图像适用于软件的特定版本，则最好链接不可变图像。这样，如果以后更新图像以反映对软件的更改，任何阅读该版本自述文件的人都会找到正确的图像。

受这一要点启发，我的首选解决方案是使用具有永久链接的资产分支进行特定的修订。

1
2
3
4
5
6
7
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.

为此图像版本构建一个"PermaLink"，并将其包装在标记中：

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

例如

江户十一〔一〕号

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

埃多克斯1〔3〕

相关讨论

在文件夹(myfolder)中提交图像(image.png)，并在readme.md中添加以下行：

江户十一〔四〕号

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

  • 然后复制图像源

  • 现在将![alt tag](http://url/to/img.png)添加到readme.md文件中。

完成！

或者，您可以使用一些图片托管网站，如imgur，获取其URL并将其添加到readme.md文件中，或者也可以使用一些静态文件托管。

样品发行

相关讨论

基本语法

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

在这里：

  • 我的图像alt标记：如果不显示图像，将显示的文本。
  • 图片的URL：不管你的图片资源是什么。图像的URI

    • 例子：

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

    。如下所示：

    stack overflow image by alamin。

    只需在readme.md中添加一个标记，并将相对SRC添加到存储库中。如果不使用相对SRC，请确保服务器支持CORS。

    因为Github支持内联HTML

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

    号

    观察这里

    I need to include some images in my README File. I don't know how to
    do that.

    号

    我创建了一个小向导，它允许您为GitHub存储库的自述文件创建和自定义简单的图像库：请参阅ReadMegalleryCreatorForGitHub。

    向导利用了这样一个事实：Github允许IMG标记出现在README.md中。此外，该向导还利用了将图像上载到Github的常用技巧，将它们拖放到问题区域(如本线程中的一个答案中所述)。

    相关讨论

    我通常在网站上托管图片，这可以链接到任何托管图片。把这个放到自述文件里就行了。适用于.rst文件，不确定.md文件

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

    您可以使用其他Github cdn链接从readme.md(或外部)链接到项目中的图像。

    URL将如下所示：

    1
    https://cdn.rawgit.com/<USER>/<REPO>/<BRANCH>/<PATH>/<TO>/<FILE>

    我的项目中有一个SVG图像，当我在Python项目文档中引用它时，它不会呈现。

    项目链接

    以下是指向该文件的项目链接(不作为图像呈现)：

    https://github.com/jongragecox/anybadge/blob/master/examples/awesomeness.svg

    嵌入图像示例：MGXY1[0]

    原始链接

    以下是指向该文件的原始链接(仍不渲染为图像)：

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

    嵌入图像示例：image。

    cdn链接

    使用cdn链接，我可以使用(渲染为图像)链接到文件：

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

    嵌入图像示例：image。

    这就是我如何在我的README.md文件和我的pypi项目restructedText数据(此处)中使用来自我的项目的图像。

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

    首先，您应该将图像文件上载到Github代码库！然后直接引用图像文件的地址。

    氧化镁

    氧化镁

    在我的例子中，我使用imgur，并以这种方式使用直接链接。

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

    。

    你只需做：

    1
    2
    3
    4
    5
    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文件中引用它：

    埃多克斯1〔18〕

    相关讨论

    如果你需要上传一些图片作为文档，一个好的方法是使用GitLFS。假设您已经安装了Git LFS，请执行以下步骤：

  • 为每种图像类型初始化Git LFS：

    1
    2
    3
    4
    5
    git lfs *.png
    git lfs *.svg
    git lfs *.gif
    git lfs *.jpg
    git lfs *.jpeg

    号

  • 创建将用作图像位置的文件夹，如doc。在基于GNU/Linux和Unix的系统上，这可以通过以下方式完成：

    1
    2
    3
    cd project_folder
    mkdir doc
    git add doc

  • 复制粘贴任何图像到文档文件夹。然后通过git add命令添加。

  • 承诺并推动。

  • 图像在以下URL中公开：

    https://media.githubusercontent.com/media/^github用户名^/^repo^/^branch^/^imageu在repo中的位置^

    • 哪里：*^github_username^是github中的用户名(可以在配置文件页面中找到)。*^repo_name^是存储库名称*^branch^是上传图像的存储库分支。*^image_location in the repo^是包括存储图像的文件夹在内的位置。

    此外，您还可以先上传图像，然后访问项目Github页面中的位置并浏览，直到找到图像，然后按download按钮，然后从浏览器的地址栏复制粘贴URL。

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

    然后，您可以使用上面提到的标记语法使用URL来包含它们：

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

    。

    假设我们使用这张照片，那么您可以使用markdown语法：

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

    在我的例子中，我想在Github和NPM上显示一个打印屏幕。即使使用相对路径在Github内工作，它也不会在它之外工作。基本上，即使我把我的项目推到了NPM上(只是使用相同的README.md)，图像也不会显示出来。

    我尝试了一些方法，最后，这对我很有用：

    埃多克斯1〔8〕

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

    就是这样！！

    注意标记中的文件名大写，并将png文件放在根目录中，链接到不带任何路径的文件名：

    1
    ![Screenshot](screenshot.png)

    用桌子来突出，它会给人以独特的魅力。

    表语法为：

    用符号|分隔每个列单元

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

    |第1栏第2栏||——————————————————————||图1图2|

    输出

    氧化镁

    现在，如果使用两个图像，只需将放在图像1和图像2。

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

    例子

    |第1栏第2栏||——————————————————————||江户十一〔11〕江户十一〔12〕号|

    间距不重要

    输出图像

    enter image description here。

    帮助者：Adam-P

    我只是在对已经接受的答案进行扩展或添加示例。

    一旦你把图像放在你的Github回购上。

    然后：

    • 在浏览器上打开相应的Github repo。
    • 导航到目标图像文件，然后在新选项卡中打开图像。氧化镁
    • 复制URL氧化镁
    • 最后将url插入到下面的模式EDOCX1[3]

    在我的案子里

    江户十一〔四〕号

    在哪里？

    • shadmazumder是我的username。
    • Xcode是projectname。
    • master是branch。
    • InOnePicture.png是image，在我的例子中，InOnePicture.png在根目录中。

    此答案也可在以下网址找到：https://github.com/youruseraccount/yourproject/blob/master/directorypath/readme.md

    使用以下方式显示来自repo的图像：预端域：https://raw.githubusercontent.com/或https://cdn.rawgit.com/追加标志：?sanitize=true&raw=true。使用标签eample url适用于SVG、PNG和JPG，使用：

    • 域名：raw.githubusercontent.com/。
    • 用户名：YourUserAccount/。
    • 回购：YourProject/。
    • 分支机构：YourBranch/。
    • 路径：DirectoryPath/。
    • 文件名：example.png。

    适用于SVG、PNG和JPEG

    1
     - `raw.githubusercontent.com/YourUserAccount/YourProject/YourBranch/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true`

    使用后显示的工作示例代码如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    **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-markdown/readme.md

    相关讨论

    最新的

    Wikis can display PNG, JPEG, or GIF images

    号

    现在您可以使用：

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

    。

    -或

    遵循以下步骤：

  • 在Github上，导航到存储库的主页。

  • 在存储库名称下，单击wiki。

  • 使用wiki侧边栏，导航到要更改的页面，然后单击"编辑"。

  • 在wiki工具栏上，单击"图像"。

  • 在"插入图像"对话框中，键入图像URL和alt文本(搜索引擎和屏幕阅读器使用)。
  • 单击"确定"。

    • 参考文件。

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

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

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

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

    1)使用html img标记，

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

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

    这两个都可以，如果您想了解更多，可以查看我的GitHub->https://github.com/adityarawat29

    如果添加多个屏幕截图并希望使用表格数据对其进行对齐以提高可访问性，请考虑使用table，如下所示：

    high-tea。

    如果您的markdown解析器支持它，那么您也可以将role="presentation"wia-aria属性添加到table元素，并省略th标记。

    我想用Zenhub更新这个，因为Github和Zenhub改变了他们的图形布局。

    如果安装ZenHub并允许访问GitHub，那么您可以在报告中导航到ZenHub选项卡并打开一个新问题。

    这是艾哈迈德·安吉在YouTube上发布视频的更新版本。

    步骤1：enter image description here。

    第2步：从那里你可以打开一个附件。

    第3步：然后您可以使用自动生成的链接。这样，您就不必费心为图像创建新的回购。

    氧化镁

    然后使用提供的URL的标准标记语法。

    步骤4

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

    。

    步骤5不要忘记关闭发行草稿，不要实际提交。图像URL仍然可以正常工作！