Skip to content

Instantly share code, notes, and snippets.

@cben
Forked from alienlebarge/dodgetocat_v2.png
Last active April 1, 2023 13:16
Show Gist options
  • Star 21 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cben/46d9536baacb7c5d196c to your computer and use it in GitHub Desktop.
Save cben/46d9536baacb7c5d196c to your computer and use it in GitHub Desktop.
Is there an easy way to link image in a GIST ?

*Forked response to alienbarge's https://stackoverflow.com/questions/15764242/is-it-possible-to-make-relative-link-to-image-in-a-markdown-file-in-a-gist *

Is there an easy way to link image in a GIST ?

I wish there is a simple way to add image to Gist like the first one because when I visualize my Markdown file locally, the links are broken.
Is there any ?

The easy way

![dodgetocat_v2](dodgetocat_v2.png)
dodgetocat_v2

The less easy way

![dodgetocat_v2](605560c2961cb3025038/dodgetocat_v2.png)
dodgetocat_v2

The hard way

![dodgetocat_v2](https://gist.github.com/alienlebarge/605560c2961cb3025038/raw/b75d209134f0fb64f04a5ee9ff274ceabf6e26e8/dodgetocat_v2.png)
dodgetocat_v2

^- strange, gist markdown processor mangled the src there to something long on https://camo.githubusercontent.com/ - and the mangled URL 404s. Actually, it also mangled src="" on most other images.

The relative hard way with raw/ and git blob id (different per file!)

![dodgetocat_v2](raw/b75d209134f0fb64f04a5ee9ff274ceabf6e26e8/dodgetocat_v2.png)
dodgetocat_v2

(605560c2961cb3025038 is the images's git blob id.)

The easy way with raw/

![dodgetocat_v2](raw/dodgetocat_v2.png)
dodgetocat_v2

But those probably don't work as images due to Content-Type: application/octet-stream. => Need a proxy UPDATE: no, gives normal Content-Type: image/png.

EDIT: as pointed out in @muv's comment, this does work when viewing this page with trailing slash: https://gist.github.com/cben/46d9536baacb7c5d196c/ but not when viewing https://gist.github.com/cben/46d9536baacb7c5d196c

I wouldn't bet on this being stable forever...

The semi-easy host-relative way

Can we solve problem 2 base URLs — with and without trailing slash — by supplying full path (but not domain)?

![dodgetocat_v2](/cben/46d9536baacb7c5d196c/raw/dodgetocat_v2.png)
dodgetocat_v2

=> Yes, works from both URLs, but all we saved is https://gist.github.com which isn't winning any flexibility over a full URL...

Via https://rawgit.com (don't use for production traffic), the hard way:

![dodgetocat_v2](https://rawgit.com/alienlebarge/605560c2961cb3025038/raw/b75d209134f0fb64f04a5ee9ff274ceabf6e26e8/dodgetocat_v2.png)
dodgetocat_v2

Via https://rawgit.com, without blob id:

![dodgetocat_v2](https://rawgit.com/alienlebarge/605560c2961cb3025038/raw/dodgetocat_v2.png)
dodgetocat_v2

Rawgit is cool service by Ryan Grove, but don't abuse it; there is also cdn.rawgit.com option for unlimited traffic but it caches by URL forever so if you use it without the blob id you won't be able to change the image later.

Now these could be relative links if instead of viewing at gist.github.com we'd view this readme at rawgit.com. Alas, Rawgit doesn't render markdown.

Another cool service, by the author of D3.js. Didn't find what constitutes reasonable use, but I'd assume don't send production traffic there either...

Judging by https://gist.github.com/mbostock/7280327 -> http://bl.ocks.org/mbostock/7280327, http://bl.ocks.org/mbostock/raw/7280327/ that successfully loads http://bl.ocks.org/mbostock/raw/7280327/shibe.jpg, the easy relative way ought to work when viewing this page via http://bl.ocks.org/cben/raw/46d9536baacb7c5d196c?

Alas, while http://bl.ocks.org/cben/46d9536baacb7c5d196c renders readme.md, http://bl.ocks.org/cben/raw/46d9536baacb7c5d196c doesn't. And since raw/ comes before the hash, we can't use a simple relative link. We can still try the absolute path:

![dodgetocat_v2](http://bl.ocks.org/cben/raw/46d9536baacb7c5d196c/dodgetocat_v2.png) dodgetocat_v2

Easy HTML way

See index.html.

<h2>index.html the easy way:<h2>
<p>If we give up markdown, we can be rendered from Rawgit / Bl.ocks.org with simple relative path:</p>
<ul>
<li><a href="http://rawgit.com/cben/46d9536baacb7c5d196c/raw/index.html">http://rawgit.com/cben/46d9536baacb7c5d196c/raw/index.html</a></li>
<li><a href="http://bl.ocks.org/cben/raw/46d9536baacb7c5d196c">http://bl.ocks.org/cben/raw/46d9536baacb7c5d196c</a></li>
<li><a href="http://bl.ocks.org/cben/46d9536baacb7c5d196c">http://bl.ocks.org/cben/46d9536baacb7c5d196c</a> (the reason same relative link works here is that it IFRAMEs the raw/ version.</li>
</ul>
<img src="dodgetocat_v2.png"/>
Copy link

ghost commented Jun 26, 2015

great article. Thank you

@bobelev
Copy link

bobelev commented Jun 2, 2016

The easy way with raw/ seems to work now. Image renders and has proper header Content-Type: image/png.

@muv
Copy link

muv commented Nov 30, 2016

The "The easy way with raw/" only works with slash at the end of the URL.

Compare:

@uolcano
Copy link

uolcano commented Mar 17, 2017

Thx. I can write the gist with the easy way, raw/<image>. And then browse it with https://gist.github.com/<username>/<hash>/, the end slash essential.

@JoshCheek
Copy link

❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment