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.
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 .md
file on github will display the following picture ;-)
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à!
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!
Solution 5
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.
AnonGeek
Updated on February 09, 2022Comments
-
AnonGeek about 2 years
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)
-
RyanJM about 11 yearsFor others finding this, Github now supports relative linkes: help.github.com/articles/relative-links-in-readmes
-
Lee Englestone almost 10 yearsI agree, preferably make it relative to an image within the repo :-)
-
Yo Hsiao almost 10 yearsIt is especially true that Github occasionally change the raw file path, notably recently from "github.com/user-name/repo-name/raw" to "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.
-
Brad almost 10 yearsThis 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. -
electronix384128 about 7 yearsYou can also use
<img src="../<branch>/screenshot.jpg?raw=true" width="100" height="100" />
If you want to support retina support by providing an image that is e.g. 200*200px ;) -
Nicholas Allio about 7 yearsHow can I display images from a private repo inside of the repo related public GitHub page?
-
TechAurelian about 6 years@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 -
Julio Marchi over 2 yearsIt is hard to help without seeing the markup you are using and without knowing the real path of the image. Can you provide it?
-
ChamodyaDias about 2 yearsThis was the same for me. Make sure you have an empty line above the code snippet specifying the image.