GitHub Markdown: Add an Image to README.md File

In GitHub, you can add an image to a README.md file in three ways. First, by referencing the existing image file that exists in your GitHub repository, second, by uploading a new image file to your repository and reference it in the README.md file and the third is by referencing an external image file. In this tutorial, I am giving examples of all these three ways to show you, how to add an image to the README.md file in GitHub. But first of all, you should know the syntax to specify an image file in the README.md or in any document in the GitHub.

GitHub Image Markdown Syntax

![Alt text](Image URL)

It starts with an exclamation mark, then square brackets where you can specify the alt text for SEO and then the image file URL in parenthesis.

1. Add an existing Image to README.md file

In the following example, we will add an image file that already exists in our repository. Below is the screenshot of the image folder contents in repository markdown-demo:

Here you can see, that we have the image file named github-logo.pngin folder images of themarkdown-demo repository. Now we can add this image in our README.md file as shown in the below example:

# Q. What is the logo of GitHub?

## Answer:
![GitHub Logo](/images/github-logo.png)

After editing the README.md file, Commit the changes. The output would be as shown in the below image:

Output:

2. Add an Image by Uploading a New Image File to Repository

In this example, we will upload a new image file in our repository markdown-demo and then we will add it to the README.md file. Follow these steps:

Upload a New Image File to Your Repository

In your repository root directory or in any existing folder, click on the Upload Files button as shown in the image below:

Then in the next step, you can browse or drag and drop a particular image or multiple images or any folder containing the images, as shown in the below screenshot:

After finishing the upload, commit the changes. Now we have a new image Christmas.png in our repository.

As this new image file, Christmas.png is in the root directory of our repository, we can reference it by just giving the name of the image file in the URL. Below is the example of README.md file, referencing the above image file:

# Happy Christmas!

![Happy Christmas](Christmas.png)

Output:

3. Add an Image from External Resource

You can add the image in the GitHub README.md file from any other website, but then you have to specify the full URL of the image address of course. In the following example, we will add an image file of another repository by specifying the image file full address:

# Hey you

![foxdemo](https://github.com/foxdemo/foxdemo.github.io/blob/master/assets/images/avatar.png)

Output:

I hope, now you will be able to add an image to your README.md file or in any document in GitHub easily. For more information on the GitHub markdown, check the Mastering Markdown guide.

Related Tutorial:

How to Create a Blog Using GitHub Pages and Jekyll with a Few Clicks