Adding images to README on GitHub

If you may want to add a few images to README.md to display direct effects of a repository on GitHub, a convenient way is to reference images that are stored in the same repository. Here is a method that allows you to show an image link (although the image itself does not display directly), and this does not affect README.md display in a local repository.

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 the image shows as below in HTML source code on the repository’s page. Actually it still shows as an image link rather than directly displaying the image, 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 redirect to a link 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