Image not showing up in README.md on GitHub

Solution 1:

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

Solution 2:

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

Solution 3:

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>

Solution 4:

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!