Press "Enter" to skip to content

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:

GitHub Repository image folder contents.

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:

Example-1: add image to readme.md in GitHub.

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:

Upload an image in GitHub repository.

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:

GitHub: uploading image file progress.

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

Repository contents.

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:

Happy Christmas Image.

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:

GitHub Markdown: Add external Image to README.md file.

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

Vinish Kapoor

FoxInfotech.in is created, written, and maintained by Vinish Kapoor. It is built on WordPress, and hosted by Bluehost. Connect with Vinish on Facebook, Twitter, and GitHub.

You may also like: