Add images to README.md on GitHub

Question

Recently I joined GitHub. I hosted some projects there.

I need to include some images in my README File. I don't know how to do that.

I searched about this, but all I got was some links which tell me to "host images on web and specify the image path in README.md file".

Is there any way to do this without hosting the images on any third-party web hosting services?

Answer 1

Try this markdown:

![alt text](http://url/to/img.png)

I think you can link directly to the raw version of an image if it's stored in your repository. i.e.

![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

Edit: just noticed comment linking to article which suggests using gh-pages. Also, relative links can be a better idea than the absolute URLs I posted above.

Answer 2

JUST THIS WORKS!!

take care about your file name uppercase in tag and put PNG file inroot, and link to the filename without any path:

![Screenshot](screenshot.png)

Answer 3

You can just do:

git checkout --orphan assets
cp /where/image/currently/located/on/machine/diagram.png .
git add .
git commit -m 'Added diagram'
git push -u origin assets

Then you can just reference it in the README file like so:

![diagram](diagram.png)

Answer 4

I usually host the image on the site, this can link to any hosted image. Just toss this in the readme. Works for .rst files, not sure about .md

.. image:: https://url/path/to/image
   :height: 100px
   :width: 200 px
   :scale: 50 %

Answer 5

Consider using a table if adding multiple screenshots and want to align them using tabular data for improved accessibility as shown here:

If your markdown parser supports it you could also add the role="presentation" WIA-ARIA attribute to the TABLE element and omit the th tags.

Answer 6

You can also use relative paths like

![Alt text](relative/path/to/img.jpg?raw=true "Title")