Adding images to README on GitHub

Sometimes you may want to add a few images to README.md to display direct effects of your repository on GitHub. You probably want to reference images that are stored in the repostiory that the README.md resides. A simple method is use below relative link, below is an example to reference screenshots/demo.png whose path is relative to the REAMDE.md file in the repository:

![Image alt text](screenshots/demo.png?raw=true)

Or with a title:

![Image alt text](screenshots/demo.png?raw=true "Image title")

Then in the repository page on GitHub the image shows as below in HTML source code. Actually it shows still as an image link not directly displaying the image itself, but it is able to direct to a page that displays the image.

<img src="/[username]/[repo-name[/raw/master/screenshots/demo.png?raw=true" alt="GCMovie list table" style="max-width:100%;" >

The directed page URL will turns to something like below in the browser:

https://raw.githubusercontent.com/[usename]/[repo-name[/master/screenshots/demo.png

Using a relative link to point a file in the repository make it works both in the GitHub and in a local repository. You can put a link in the README.md to point a file:

[Contribution guidelines for this project](docs/CONTRIBUTING.md)

See Relative links and image paths in README files for more details.

Resources