All examples By author By category About

cben

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.

According to http://blog.rodneyrehm.de/archives/35-Including-Data-From-Github.html :

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.

Via http://Bl.ocks.org

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 -> /mbostock/7280327, /mbostock/7280327/example/ that successfully loads /mbostock/7280327/example/shibe.jpg, the easy relative way ought to work when viewing this page via /cben/46d9536baacb7c5d196c?

Alas, while /cben/46d9536baacb7c5d196c renders readme.md, /cben/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](/cben/46d9536baacb7c5d196c/dodgetocat_v2.png) dodgetocat_v2

Easy HTML way

See index.html.