I am trying to add an image to the README.md in my repository using markdown below:
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:
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.
Updated content
Since January, 30th 2013, GitHub now supports relative links in markup documents.
This means that your code  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
Using this in a .mdfile 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
You really should use relative urls. That way they'll work better for private repos as well.
supposing your repo has latest.png inside the screenshots folder.
~B
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>
An extension to previous answers...
The image would not show for me when the line:
Was directly below a <h2></h2> line and I needed to add an empty line between them.
Hopefully this saves someone some time!
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:
The button used to say "Raw" not "Download" so I hope this helps people find it.
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.
Check the file extensions because .png is not the same as .PNG.
Also use / instead of \ while specifying the file path.
Side note, when using reStructuredText use:
.. image:: /screenshots/latest.png?raw=true
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.
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.
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 , it won't work. The image has to be saved without any spaces in the file name.
So Some_Name.png with  will work.
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  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.
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.
Related
I am trying to follow the Jekyll docs and am stuck on how to display an image
---
layout: post
title: "My first post!"
date: 2016-10-20 16:17:57 +0200
categories: jekyll update
regenerate: true
---
This is in the `_posts` directory.
It can be edited then rebuild the site to see the changes.
You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
![name of the image][{{site.url}}/assets/P6740674.JPG]
I feel very silly asking this question as it is so basic but I can not find any answers to my question
Is it possibly a configuration error on my own system. I am using apache2, ruby gems, etc
Thanks in advance
If you want to use site.url, you have to add a url variable to your _config.yml file. More info in the Jekyll documentation.
But you might not have to use site.url at all. Any urls that start with a / slash will be relative to the top level of your domain. So you could do this:
I could see an images directory created under assets by default. I've placed an image as follows.
assets/images/myimage.jpg and add following line in the post.
Run bundle exec jekyll serve and see if there is any error. If you have mentioned mismatching file location, you will see error here.
The problem here is annoying simple - you have the wrong format for your image link.
It should be . You have ![name][link]. Note the difference in the brackets. Everything else is fine.
I know this is an old question but I spent some 15min on this (jekyll/github blog is my secondary blog). So adding a suggestion here.
Briefly, as Kevin suggested, add the image file to a path under the root and give path to that file. Make sure that the file/directory is being tracked; not .gitignored.
My assets directory is inside _site directory. But, when I added a new image under that path git status did not show it as newly added- .gitignore ignored the _site directory. So Kevin's suggestion did not work as is. But as per his suggestion, I reasoned that as docs is my site's root, if I add an images directory there and add the image under that then something like
should work. And it worked this way. Not sure if this is the best way. Sharing here in case you have similar config.
In my case, I forgot to push the image to remote and therefore the image didn't show. Just to keep this in mind as well.
I would like to download all images in full quality from this blog: http://w899c8kcu.homepage.t-online.de/Blog.
I have access to server, but I can not find the directory where the images lie. When I use Firebug on the first picture, it shows me http://w899c8kcu.homepage.t-online.de/Blog;session=f0577255d9df9185d3abe04af0ce922d&focus=CMTOI_de_dtag_hosting_hpcreator_widget_PictureGallery_15716702&path=image.action&frame=CMTOI_de_dtag_hosting_hpcreator_widget_PictureGallery_15716702?id=34877331&width=1000&height=2000&crop=false.
How can I find the file paths like /dirname/image.jpg?
According to its HTML output the page obviously uses the CM4all content management system (CMS).
I don't know how precisely this CMS is working, though generally CMSs normally either save the files under cryptic names within a folder specified in the CMS's configuration or not in the file system at all but within a database.
Also, CMS may only save compressed or resized versions of the original files.
So, if you don't want to or are not able to dig into the server-side script code to find out if and where the images are saved, you should contact the company behind CM4all about this.
I'm just wondering how AdEven added pictures to the README.md hosted on GitHub without having the pictures in the repo (you can find their GitHub-project here: https://github.com/adeven/adjust_ios_sdk).
The images are hosted under https://raw.github.com/adeven/adjust_sdk/master/Resources/ios/.png and I want to know how to upload the pictures exactly like AdEven.
Thanks and Regards,
Sascha
if you look at the raw version of the file (https://raw.github.com/adeven/adjust_ios_sdk/master/README.md)
You can see how they do it.
![][drag] where you want the picture
[drag]: https://raw.github.com/adeven/adjust_sdk/master/Resources/ios/drag2.png
To define the file location.
Just replace the name and the location with your own. The raw url is direct access into the repo, so GH doesn't apply any formatting.
I solved that problem by going to github, in to my repo then creating and issue. In the text box inser the picture you would like to have in your readme.md. When you insert it in the text box it will give you the URL to your image. Simply copy the image url that it provided and insert it to your readme!
I have build that generates a png image archived as an artifact. I would like this to be displayed on the build results page.
I know that by default a link to the image will be there, but I would like the png to be actually visible - using an img tag
I'm sure that there is a plugin for that, but i couldn't find it!
Thanks for any suggestions!
The easiest way to add an image display to your Jenkins project is to edit the project description.
At the top of the project, on the right, there's an 'edit description' button. This allows you to enter HTML code that will be displayed at the top of the project. Assuming the image you generate has a fixed known URL, you should be able to add it in here.
I've seen this done, for example, with PHP projects that use PDepend to generate code stats graphs. In these cases, the project 'description' might look something like this:
<a href='ws/build/pdepend/overview-pyramid.svg'><img src="ws/build/pdepend/overview-pyramid.svg" type="image/svg+xml" /></a>
<a href='ws/build/pdepend/dependencies.svg'><img src="ws/build/pdepend/dependencies.svg" type="image/svg+xml" /></a>
This would result in the two charts being displayed at the top of the project page.
(You can, of course, enter a regular description text as well).
Hope that helps.
Even after using the solution given by SDC, it doesn't worked for me.
After doing some R&D, I observed that it was a bug in Jenkins
https://issues.jenkins-ci.org/browse/JENKINS-22028
and resolved in 1.564 or newer.
To resolve this all you have to do is Manage Jenins> Configure Global Security > and select the markup formatter as RAW HTML.
You can use Sidebar-Link Plugin for small images (icons). Otherwise get Chuck Norris Plugin and customize it to your needs.
I am using fckEditor as text editor. When i upload images thru it the images were uploaded to app/webroot/fckeditor/images.
And when they're embedded it looks like
/fckfiles/SalmonSashimi.jpg
Until now it looks right.
But the image doesn't appear.
So when I browse the image directly, at here
http://www.in-culture.info/fckfiles/SalmonSashimi.jpg
instead of displaying the URL, Cake interrupts the image call and trying to render it in a layout. I often face this error when I point .html file for iframe scroller and .xml file for flash embedding. This is really embarrassing
You can see the page here
http://www.in-culture.info/events/view/42
That image should appear before the text - "More" dont appear for short text.
Thanks for you help.
Try to change the path where the images are saved. Instead of
/app/webroot/fckeditor/images
try to change to
/app/webroot/img/fckeditor/
I believe that it's possible.
It's resolved now.
It was not cake's fault.
I pointed incomplete absolute path at FckEditor so it didn't upload the files well.
However the uploader mistakenly passes the "OK" so the HTML tries to display it.
So cake tries to render something, as usual, when there is no physical file.
I spent about 10 hours to resolve this.
Now I don't hate cake as I did a few hours ago. (: :)