Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display images in Markdown files on Github?

I want to display some images in a Markdown file on Github. I found it works this way:

![Figure 1-1](https://raw.github.com/username/repo/master/images/figure 1-1.png "Figure 1-1") 

But i need to collaborate with others so i don't want the username and repo name hard coded .

I tried to use this:

![Figure 1-1](images/figure 1-1.png "Figure 1-1") 

It works on my local disk but not work on Github.

Is there anyone knows about this issue?

like image 693
WoooHaaaa Avatar asked Oct 24 '12 14:10

WoooHaaaa


People also ask

How do I display an image in GitHub markdown?

Drag and drop the image into the Comment field. The image will start uploading to Github servers. 4) Save the markdown file. And you'll see the image placed inline in the markdown file.

Can markdown files have images?

README.md files are created using Markdown which you can use to format text and add images.


2 Answers

I found the answer myself.

Just simply append ?raw=true to the image url will make the trick:

![](images/table 1-1.png?raw=true) 
like image 141
WoooHaaaa Avatar answered Sep 21 '22 18:09

WoooHaaaa


I just had the same issue and it turned out to be caused by the space in the URL. Manually URL encoding the space as %20 fixed it.

So using your example I changed:

![](images/table 1-1.png) 

to:

![](images/table%201-1.png) 

2021 Edit: Thanks Emilio for pointing out that the GitHub flavored markdown spec has been updated to allow spaces in filenames when the filename is enclosed inside "pointy" (angle) brackets:

The destination can only contain spaces if it is enclosed in pointy brackets Example 498 [link](</my uri>) --> <p><a href="/my%20uri">link</a></p> 

Ref: https://github.github.com/gfm/#example-498 (scroll up for description)

This works with images too so we can now also use:

![](<images/table 1-1.png>) 
like image 37
foz Avatar answered Sep 20 '22 18:09

foz