Image not showing up in README.md on GitHub

user_1035547 0
Viewed 81885

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)
url github image
11 Answers

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>
user_50190130

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!

user_105176870

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.

user_126159530

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.

user_84004750

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

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

user_97113530

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

enter image description here

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

user_56753250

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.

user_106909410

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.

user_90474440
Related