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)
The reason the images on your GitHub Pages site will not display is because you're trying to call to the photos in a directory that does not exist. For example, in lasagna. html , you're trying to call to /images/lasagna. html , which does not exist within the folder that lasagna.
Images can be added to any markdown page using the following markdown syntax: ![ alt text for screen readers](/path/to/image. png "Text to show on mouseover") .
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.
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 ;-)
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With