Is it possible to make relative link to image in a markdown file in a gist?

GithubMarkdownGist

Github Problem Overview


I've got a gist which contains a markdown file and an image.

Is there a way to do a relative link to this image? Something like ![My image](image.png) instead of ![My image](https://gist.github.com/user/605560c2961cb3025038/raw/b75d2...6e8/img.png)

Here is an example

Github Solutions


Solution 1 - Github

As of now, relative image links are working for me, in both a repository and a wiki. I'm using syntax like this:

![Kiku](images/Kiku.jpg)

Here's an example:

https://github.com/mark-anders/relative-image-url

Solution 2 - Github

According to http://blog.rodneyrehm.de/archives/35-Including-Data-From-Github.html, the problem in using https://gist.github.com/user/605560c2961cb3025038/raw/b75d2...6e8/img.png

is that the b75d2...6e8 part varies per file (a quick experimentation confirms it is the git blob id). However you can drop that part resulting in a URL pointing to the latest version:

https://gist.github.com/user/605560c2961cb3025038/raw/img.png

or to take a working example:

https://gist.githubusercontent.com/cben/46d9536baacb7c5d196c/raw/dodgetocat_v2.png
Relative path?

This also works as relative path raw/dodgetocat_v2.png!
However (as of late 2017) github can render the same gist from 2 URLs:

[UPDATED Dec 2017. Previous problems of raw files served as Content-Type: application/octet-stream and rewriting src attributes of images to camo.githubusercontent.com no longer happen, at least not for images from same gist.]

Alas, we can't just use the first URL and trust it to always work.

  • Currently neither form returns a redirect, nor serves a rel=canonical link. I wouldn't bet on Github to never change this!
  • All internal gist links (e.g. from user's page https://gist.github.com/cben/) omit the trailing slash :-(
  • Gists in Google search results omit the trailing slash :-(

(You could use relative path 46d9536baacb7c5d196c/raw/dodgetocat_v2.png that would only work without trailing slash, but that's also questionable idea, and less worth it — not really more flexible than full URL.)

Using a proxy?

Both can be worked around with a proxy fixing the Content-Type, e.g. Rawgit or Bl.ocks.org (not by Github, don't abuse them). Unfortunately Rawgit doesn't render Markdown, only serves files as-is, and Bl.ocks.org does render markdown but the URL structure is such that relative links won't work. This means you can either reference full external URL in Markdown, or relative in HTML :-(

See https://gist.github.com/cben/46d9536baacb7c5d196c/ forked off your gist, and its index.html viewed via:

Solution 3 - Github

Yes, the relative link is working for me. I am using pancake.io to host my pages. <http://pancake.io/2c8aa8/topics/cpp/cpp.md>

The images on that page are in the cpp folder.

The markdown code used for the first image is

![C++ Var Types](basic_cpp_var_types.png)

The markdown code (actually html) used for the second image is

<div style='float: center'>
  <img style='width: 600px' src="prefixpostfixincrement.png"></img>
</div>

NOTE: I missed the gist part. Try the html way if gist doesn't support the markdown relative image path syntax.

Solution 4 - Github

tested just now... i was unable to use relative urls on the github wiki.

i had to add the image to the wiki repo, then browser the repo and have github show it to me (so i could grab the url). then use the full url in the markdown. but luckily, the urls are simple to predict: https://github.com/*username*/*reponame*/wiki/*imagename.png*

i submitted this isse to the github support.

Solution 5 - Github

No, the relative URL to an image from markdown doesn’t work, so you’ll have to stick with the long, static URL:

https://gist.github.com/mattborn/c346c8689a5eaf86e823

However, relative URLs to some files work:

http://bl.ocks.org/mattborn/c346c8689a5eaf86e823

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionalienlebargeView Question on Stackoverflow
Solution 1 - GithubmarkandView Answer on Stackoverflow
Solution 2 - GithubBeni Cherniavsky-PaskinView Answer on Stackoverflow
Solution 3 - GithubKaushal ModiView Answer on Stackoverflow
Solution 4 - GithubxeroView Answer on Stackoverflow
Solution 5 - GithubMatt BornView Answer on Stackoverflow