在GitHub的wiki(gollum)存储库中嵌入图像?

92
Github的维基百科是由一个单独的git仓库支持的,而不是主项目仓库。
Github团队的这篇文章让人觉得你应该能够在维基标记中链接到存储在维基仓库中的图像。

图像和文件夹

现在你可以引用Git仓库内部托管的图片了。

我已经检出了我的维基仓库,并将资源文件夹和图像推送到其中。我的问题是,我该如何使用这个图像
这是否可能,或者我理解错了什么?

有一个关于向维基添加图片的Github常见问题解答,但它没有关于这里讨论的短相对图像URL的信息。 - k3b
典型的图像URL使用Camo进行渲染。 - Laurie Stearn
2022年2月:现在官方支持在Wiki页面上上传图片。请参见我的回答 - VonC
16个回答

107

如果你想在 GitHub Wiki 上查看图片,可以按照以下方法进行:

  • 进入你的仓库 Wiki 页面中的 "Git Access" 选项卡,获取 SSH 路径,格式类似于:git@github.com:USER/REPO.wiki.git,其中 USER 是你的账户名,REPO 是仓库名。
  • 在本地机器上使用 Git 命令行工具,通过以下命令进入你想要的本地目录并获取仓库:

    git clone git@github.com:USER/REPO.wiki.git

  • 在该仓库中创建一个图片文件夹,例如 "images",并将需要的图片放入其中

  • 然后将你的 Wiki Git 目录推送到 GitHub
  • 虽然在 "Pages" 选项卡中无法直接查看这些图片,但只要在本地链接中引用它们,就可以看到它们。以下是 Markdown 的示例:

    ![Alt 属性文本](images/YOURIMAGE.ext)

  • 你也可以像下面这样进一步包装图片作为链接来嵌入它自己:

    [![Alt 属性文本](images/YOURIMAGE.ext)](http://Yoursite.com)

你还可以在本地副本中添加子目录来帮助组织 Wiki,因为 "pages" 选项卡只是简单地列出它们。但请记住,即使推送了新目录,"Pages" 选项卡也不会显示目录。


这是一篇文章,解释了@urig建议的解决方案。非常酷。http://mikehadlow.blogspot.com/2014/03/how-to-add-images-to-github-wiki.html - ElMatador
@ElMatador,答案是由Ryan Q.发布的。我只对它进行了微小的编辑。 :) - urig

56

以上代码已经失效。我已经fork了上述的repo并进行了更新,示例在这里 https://github.com/thomaswelton/gollum-demo/blob/patch-1/Mordor/Eye-Of-Sauron.md这个相对路径可以正常工作 ![Eye of Sauron](eye.jpg) - Thomas Welton
4
也许我漏掉了什么......但是在我帮助管理的这个维基百科上,[[wiki syntax]]是有效的:https://github.com/newhavenrb/conferences/wiki/WindyCityRails-2012。也许你是在尝试将其用于 README 文件? - Benjamin Oakes
值得一提的是,文件名区分大小写!例如[[images/foo.jpg]]当您的图像命名为Foo.jpg时将无法工作。 - Kieran Harper
2
维基语法由文件扩展名决定。.wiki 使用mediawiki风格。.md使用markdown风格(RyanQ的答案)。 - Drew Noakes
3
此答案已过时,请参见下面的@Werner的答案(简而言之,使用![text](images/someimage.png)并保存-不会在预览中显示) - edmofro
显示剩余9条评论

33

readme.md 中添加图片,似乎没有任何答案有效。但是我有一个解决方案:

如果图片的 URL 是:

https://github.com/Username/Repository-Name/blob/master/Directory-Inside-Repository/image.png

blob替换为raw将给出原始图像的URL:

https://github.com/Username/Repository-Name/raw/master/Directory-Inside-Repository/image.png

现在,您可以使用普通的 Markdown 嵌入图像:

![Image Alt](https://github.com/Username/Repository-Name/raw/master/Directory-Inside-Repository/image.png)

更新: 目前为止,GitHub 也从不同的子域 raw.github.com 提供原始图像。因此,你也可以使用以下方式:

https://raw.github.com/Username/Repository-Name/master/Directory-Inside-Repository/image.png

例子:https://raw.github.com/Automattic/liveblog/master/screenshot-1.png


太棒了...这让我可以在GitHub评论中直接链接到一张图片。 :) https://github.com/mccalltd/AttributeRouting/issues/98#issuecomment-7497261 - Leniel Maccaferri
1
适用于我,谢谢。可惜它不支持相对路径。 - E Ciotti

28

相对路径对我来说是这样工作的:

维基的主页:

![text](wiki/images/someimage.png)

维基的子页面:

![text](images/someimage.png)

请注意,在进行预览时,图片不会显示,我已保存它。


3
@Werner提供的这个提示非常重要。(非常感谢!)由于某种原因,您的维基主页与所有其他页面不同,因此在主页上您需要使用wiki/path/foo.ext,而其他所有页面都使用path/foo.ext。相对引用自己存储库中的文件比绝对引用更好。如果您移动、克隆或离线修改项目,则无论存储库位于何处,一切仍将正常运行。另外请注意,对于大多数情况,使用![text](link)语法是可以的,但是如果您需要对齐图像,则必须使用标准的HTML IMG标记。 - TonyG
似乎这是更为最新的答案。 - albfan
这里的分支是什么? - Jonny
请注意,在预览时图像不会显示,我已经保存了它。对于那些选择不记在心中的人来说,这仍然是一个非常有用的提示。 - Laurie Stearn

16
如果你想通过拖放快速上传图片,可以执行以下(虽然有些麻烦)操作:
创建一个虚拟问题;将您的图像拖放到其中;复制/粘贴已上传的Markdown图像代码到您的维基页面。
一旦创建了该问题,您可以无限次使用它来执行此操作。
希望这对任何需要快速修复而无需在资料库中存储图像的人有所帮助。

10

这里有一个实用的方法:

  • 打开github上的任何问题
  • 在评论区,你可以附加文件,只需拖放、选择或粘贴你的图片
  • 复制文本框中显示的代码/链接
  • 将其粘贴到wiki中
  • 获得收益!

与 @tiby 的解决方案相比,您甚至不必创建或修改任何问题!


4
谢谢!我想知道为什么 GitHub 的 Wiki 站点不支持这个功能。 - Sven

6

3
可以运行,但与GitHub文件存储方式紧密耦合。如果他们更改路径,它将会出现错误。在本地通过gollum运行wiki时也会出现错误。 - Benjamin Oakes

5

@JonathanLeung 这只是一个链接语法的示例,它实际上并没有跳转到任何地方。 - James McMahon

2

使用nerdwin描述的方法将图像添加到代码库并使用![test](test.jpg)在wiki中显示。


1
以下的Markdown将会从你在GitHub上的repo中引用一张图片,该图片将会在对应的GitHub wiki中显示。
![My Alt Text](../blob/master/Path/ToAsset/In/Repo.png?raw=true)

上面的示例假设您的存储库中具有以下文件结构。
  • Path
    • ToAssets
      • In
        • Repo.png

举个现实世界的例子,如果我想在github上从相应的wiki引用this image,我会使用这个markdown

![Azure App Settings](../blob/master/TrelloWorld/TrelloWorld.Server/Assets/Azure_AppSettings.png?raw=true)

注意事项

  1. 大小写敏感
  2. 如果您在维基的特殊主页上,不需要使用../返回上一级。在上面的示例中,正确的链接应为

主页:

![Azure App Settings](blob/master/TrelloWorld/TrelloWorld.Server/Assets/Azure_AppSettings.png?raw=true)

大小写很重要。Repo.png与repo.png不同。 - Josh
如果您正在维基的主页上,则会略有不同。 您需要去掉 ../。 链接将是(blob/master/Path/ToAsset/In/Repo.png?raw=true)。 - Josh
托管图像的分支是否重要? - Jonny
我没有尝试过,但是通过查看我的示例中的URL,我相信它会起作用。在我的示例中,我假设一切都在主分支上。您可以假定只需将我的示例中的“master”一词更改为图像所在的任何分支。 - Josh

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接