How to insert image in README file on GitHub

171
How to insert image in README file on GitHub

A README file is a text file that contains information about the program. A README file is very important because it tells users what the project does, how to use it and other useful information.

Normally, a good README file should contain the below basic information.

  • What does your project do
  • What are the function of projects
  • How users can get started with the project
  • Where users can get help with your project
  • Who has contributed to the project

You can also define a table of content in your README file. You can find a good template about the README file in this gist file.

These are the basic introduction to the README file. Now let’s come to our topic. Inserting image in README file gives a nice impression to the user and sometimes give more information than actual words (A picture speaks a thousand words). I will explain steps to insert an image in GitHub README file,

Let’s get started.

1Method 1

  • Open your GitHub project directory and create a new issue.
  • Drag and drop the image in the comment section and wait for image upload complete
  • After the image is successfully uploaded, you will get the URL of the image. Copy the URL and paste it in your README file. Note that you don’t need to submit your issue. Without submitting, your image will be uploaded in the GitHub server.
  • How to insert image in README file on github

2Method 2

You can display screenshot when image is uploaded in your repository. When you have image in your repository, you can link from your README file:

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

3Method 3

You can also display screenshot hosted elsewhere. For this you need to give absolute path of the image.

![Alt text](http://full/path/to/img.jpg "Optional title")

These are the three methods in which you can insert your screen in your README file. Hope this helps your problem in future. What do you think about these? Be sure to leave a comment below.

LEAVE A REPLY

Please enter your comment!
Please enter your name here