GitHub Markdown: Add an Image to File

In GitHub, you can add an image to a 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 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 file in GitHub. But first of all, you should know the syntax to specify an image file in the 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 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 file as shown in the below example:

# Q. What is the logo of GitHub?

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

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


Example-1: add image to 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 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 file, referencing the above image file:

# Happy Christmas!

![Happy Christmas](Christmas.png)


Happy Christmas Image.

3. Add an Image from External Resource

You can add the image in the GitHub 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



GitHub Markdown: Add external Image to file.

I hope, now you will be able to add an image to your 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

4 thoughts on “GitHub Markdown: Add an Image to File”

  1. Hi,

    I don't get the relative path to work. my image is in the /png folder of my repo, but ![image](png/image.png) does not show the image. Even if I put the image in the rootfolder and have ![image](image.png) it does not show the image. Any suggestions?


Leave a Comment