Image not showing up in README.md on GitHub

Question

I am trying to add an image to the README.md in my repository using markdown below:

![ScreenShot](https://github.com/i-saumitra/Voice-controlled-MP3-Player/blob/master/screenshot.jpg)

But the image is not showing when I visit my repository. Instead the link to the image is showing up. Clicking the link will open the image in new window.

I have also tried using relative path:

![ScreenShot](screenshot.jpg)

But this is giving page not found error.

What is the correct markdown to display image in README.md

Both README.md and image file are in same path/directory.

What is the correct way to display an image in github README.md?

Complete content of README.md file is as below:

Voice-controlled-MP3-Player
===========================

A MP3 player which accept voice command like PLAY, PAUSE, FORWARD, etc. Using C# and Microsoft Speech API.

![ScreenShot](https://github.com/i-saumitra/Voice-controlled-MP3-Player/blob/master/screenshot.jpg)

Possible duplicate of [Add images to README.md on GitHub](http://stackoverflow.com/questions/14494747/add-images-to-readme-md-on-github) — ashokramcse, Nov 09 '16 at 07:01
All of a sudden, this "problem" has resurfaced. The images that were rendering previously don't show up. This is not only in my repos but others as well. What gives? — lifebalance, Feb 01 '22 at 03:35
Never mind! They seem to work now...I even made an issue of it on another repo! https://github.com/arshadkazmi42/first-issues/issues/87 — lifebalance, Feb 01 '22 at 03:40

nulltoken · Accepted Answer · 2014-07-23T18:14:08.223

Updated content

Since January, 30th 2013, GitHub now supports relative links in markup documents.

This means that your code ![ScreenShot](screenshot.jpg) would now work flawlessly.

As pointed by @Brad, this may also ease a scenario where the images are different in two branches, but bear the same. In that case, switching from one branch to another, would dynamically switch the image in the rendered view, thus without requiring any change to the Readme content.

Blog post announcement
Help article

Previous answer when GitHub wasn't supporting relative links

You have to use the raw url format. In your case that would be https://raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg

This means that the correct markdown would be the following

![ScreenShot](https://raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg)

Using this in a .mdfile on github will display the following picture ;-)

ScreenShot

Update following your comment

where is this officialy documented that we have to use raw...i couldn't find it anywhere

This URL format is an undocumented feature of the GitHub site. This means that it could change later. If that ever happens, in order to "rediscover" the new format, click the Raw button when displaying a image. This will "open" the image in your browser. Copy the URL and Voilà!

raw

Note: Although the repository is no longer on hosted on GitHub, I've updated the urls to reflect the new GitHub policy regarding user content

For others finding this, Github now supports relative linkes: https://help.github.com/articles/relative-links-in-readmes — RyanJM, Apr 10 '13 at 15:35
This is no longer a good solution. GitHub now supports linking to an image with a relative path: `![alt text](doc/image.png)` The benefit here is that you can use other branches and know that you have the right version of the images in your documentation. — Brad, Jul 23 '14 at 16:47
@Brad I'm storing the images in an `assets` branch, and I'm having issues to make relative paths work with both the GitHub README, and with the README file locally. Please see [this question](https://stackoverflow.com/questions/49670565/display-github-readme-screenshot-stored-in-a-different-branch-both-on-github-an) — TechAurelian, Apr 05 '18 at 13:39

score 41 · Answer 2 · answered Oct 08 '13 at 07:11

41

You really should use relative urls. That way they'll work better for private repos as well.

![ScreenShot](/screenshots/latest.png)

supposing your repo has latest.png inside the screenshots folder.

~B

answered Oct 08 '13 at 07:11

bosky101

2,244
1
18
10

1

I agree, preferably make it relative to an image within the repo :-) – Lee Englestone Jun 05 '14 at 08:10
1

It is especially true that Github occasionally change the raw file path, notably recently from "http://github.com/user-name/repo-name/raw/" to "https://raw.githubusercontent.com/user-name/repo-name/". Use relative paths so you don't need to check often if your repo image links are broken. – Yo Hsiao Jul 03 '14 at 22:04
You can also use `` If you want to support retina support by providing an image that is e.g. 200*200px ;) – electronix384128 Feb 06 '17 at 21:12
How can I display images from a private repo inside of the repo related public GitHub page? – Nicholas Allio Mar 10 '17 at 13:25

score 18 · Answer 3 · answered Nov 27 '17 at 09:57

18

For relative URL's to work with images, wrap it inside the paragraph tag.

I was facing the problem, especially when working with the single image.

Example:

<p>
    <img src="relativePath/file.png" width="220" height="240" />
</p>

answered Nov 27 '17 at 09:57

Rakesh Yembaram

433
4
7

score 8 · Answer 4 · answered Nov 30 '19 at 19:09

8

An extension to previous answers...

The image would not show for me when the line:

![ScreenShot](/image.png)

Was directly below a <h2></h2> line and I needed to add an empty line between them.

Hopefully this saves someone some time!

answered Nov 30 '19 at 19:09

Josh Mitton

141
1
3

This was the same for me. Make sure you have an empty line above the code snippet specifying the image. – ChamodyaDias Apr 18 '22 at 15:55

score 3 · Answer 5 · answered Dec 28 '19 at 21:15

Thought I would update this for 2019 as I had trouble figuring this out for myself. I uploaded my images to a repo on GitHub, and then used the raw url of the image to import it into my markdown file. To get the raw url, click on the specific image link in GitHub so you are on the page for that specific image. To the top right of the photo, there are two buttons, "Download" and "History". If you click "Download", it takes you to that raw url with the picture taking up the full screen. Copy that url, and then paste it like this in your markdown file:

![image description or alt text](https://raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg)

The button used to say "Raw" not "Download" so I hope this helps people find it.

Gel · Answer 6 · 2018-01-19T03:12:55.720

This may not be relevant to previous answers. I have the same question as the OP - I was directed here and it didnt help me. I hope I can help add light to this question however - as it covers the possibilities of why images does not render in README.md file.

The issue I encountered is that the file name README.md file is written as readME

Not only its missing .md its also written differently.

Apparently, we should not rename the README.md file. It has to be the original name of that file in order to render the images or gifs you want to upload on github README.md page. Hope this helps someone, in rare of occasions, just like I did.

score 1 · Answer 7 · edited Aug 30 '21 at 12:56

1

Check the file extensions because .png is not the same as .PNG.

Also use / instead of \ while specifying the file path.

edited Aug 30 '21 at 12:56

Tomerikoo

18,379
16
47
61

answered Aug 17 '21 at 18:10

Pragato Bhattacharjee

11
2

It is hard to help without seeing the markup you are using and without knowing the real path of the image. Can you provide it? – Julio Marchi Aug 30 '21 at 03:52

score 1 · Answer 8 · answered Feb 24 '23 at 07:16

Make sure you check the case of the file extension. They have to match (either capital or lowercase). If you have my_image.PNG in your root directory and you add ![screenshot](/my_image.png) to your README file, it will not work. For some reason, Windows likes to capitalize file extensions sometimes. Unfortunately, Git does not recognize extension case so if you try to fix it by just changing the file name, you won't be able to commit the changes to the repo since Git will think everything is up to date. So you either have to update README.md or do some workaround like moving the file out of the directory, making a commit, then editing the file name then moving it back and doing another commit.

score 0 · Answer 9 · answered May 04 '16 at 15:47

0

Side note, when using reStructuredText use:

.. image:: /screenshots/latest.png?raw=true

answered May 04 '16 at 15:47

brianray

1,139
1
12
16

score 0 · Answer 10 · answered Apr 02 '21 at 12:35

0

I've tested with "Copy path" and in some locations this was working and in others it didn't.

In the cases it didn't, I copied the permalink and used it instead.

answered Apr 02 '21 at 12:35

Tiago Martins Peres

14,289
18
86
145

score 0 · Answer 11 · answered Feb 09 '22 at 00:32

0

It doesn;t work when there are any html tags just above the line where image is being imported. You can try removing the html code or add some blank lines for the image to show on Readme.

answered Feb 09 '22 at 00:32

Hardik Kamboj

81
1
7

score 0 · Answer 12 · answered Oct 12 '22 at 14:11

This is just to help someone who is still having issues with image rendering in README.md:

If your image is named Some Name.png and you are trying to attach it in the README.md like ![Some Name](relative/path//res/Some Name.png), it won't work. The image has to be saved without any spaces in the file name.

So Some_Name.png with ![Some Name](relative/path//res/Some_Name.png) will work.

score -1 · Answer 13 · edited Oct 01 '20 at 12:59

-1

I had to add a <br> to return a line in order for the image to show on mine. This discovery was inspired by the comment in this thread to leave a blank line after a tag.

edited Oct 01 '20 at 12:59

Wai Ha Lee

8,598
83
57
92

answered Oct 01 '20 at 12:06

MDShields

75
1
1
4

Image not showing up in README.md on GitHub

13 Answers13

Updated content

Previous answer when GitHub wasn't supporting relative links

Update following your comment

Linked