How to Add Images to Readme. Md on Github?

Recently I joined GitHub. I hosted some projects there.

I need to include some images in my README File. I don't know how to do that.

I searched about this, but all I got was some links which tell me to "host images on web and specify the image path in README.md file".

Is there any way to do this without hosting the images on any third-party web hosting services?

4

40 Answers

Try this markdown:

![alt text]()

I think you can link directly to the raw version of an image if it's stored in your repository. i.e.

![alt text]()
19

You can also use relative paths like

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

Also try the following with the desired .fileExtention:

![plot](./directory_1/directory_2/.../directory_n/plot.png)
13
  • You can create a New Issue
  • upload(drag & drop) images to it
  • Copy the images URL and paste it into your README.md file.

here is a detailed youTube video explained this in detail:

13

It's much simpler than that.

Just upload your image to the repository root, and link to the filename without any path, like so:

![Screenshot](screenshot.png)
8

You can also add images with simple HTML tags:

<p align="center">
  <img src="your_relative_path_here" width="350" title="hover text">
  <img src="your_relative_path_here_number_2_large_name" width="350" alt="accessibility text">
</p>
3

Many of the posted solutions are incomplete or not to my taste.

  • An external CDN like imgur adds another tool to the chain. Meh.
  • Creating a dummy issue in the issue tracker is a hack. It creates clutter and confuses users. It's a pain to migrate this solution to a fork, or off GitHub.
  • Using the gh-pages branch makes the URLs brittle. Another person working on the project maintaining the gh-page may not know something external depends on the path to these images. The gh-pages branch has a particular behavior on GitHub which is not necessary for hosting CDN images.
  • Tracking assets in version control is a good thing. As a project grows and changes it's a more sustainable way to manage and track changes by multiple users.
  • If an image applies to a specific revision of the software, it may be preferable to link an immutable image. That way, if the image is later updated to reflect changes to the software, anyone reading that revision's readme will find the correct image.

My preferred solution, inspired by this gist, is to use an assets branch with permalinks to specific revisions.

git checkout --orphan assets
git reset --hard
cp /path/to/cat.png .
git add .
git commit -m 'Added cat picture'
git push -u origin assets
git rev-parse HEAD  # Print the SHA, which is optional, you'll see below.

Construct a "permalink" to this revision of the image, and wrap it in Markdown.

Looking up the commit SHA by hand is inconvenient, however, so as a shortcut press Y to a permalink to a file in a specific commit as this help.github page says.

To always show the latest image on the assets branch, use the blob URL:

 

(From the same GitHub help page File views show the latest version on a branch)

5

You can also insert animated SVG images in the markdown file like any other format.
It can be a good alternative to GIF images.

![image description](relative/path/in/repository/to/image.svg)
OR
<img src="relative/path/in/repository/to/image.svg" width="128"/>

Example (assuming the image is in assets directory in the repository):

![My animated logo](assets/my-logo.svg)

Result:


To use different images based on GitHub dark/light theme see this post.

Commit your image (image.png) in a folder (myFolder) and add the following line in your README.md:

![Optional Text](../master/myFolder/image.png)

I need to include some images in my README File. I don't know how to do that.

I created a small wizard that allows you to create and customize simple image galleries for your GitHub repository's readme: See ReadmeGalleryCreatorForGitHub.

The wizard takes advantage of the fact that GitHub allows img tags to occur in the README.md. Also, the wizard makes use of the popular trick of uploading images to GitHub by drag'n'dropping them in the issue area (as already mentioned in one of the answers in this thread).

4
  • Create an issue regarding adding images
  • Add the image by drag and drop or by file chooser
  • Then copy image source

  • Now add ![alt tag]() to your README.md file

Done!

Alternatively you can use some image hosting site like imgur and get it's url and add it in your README.md file or you can use some static file hosting too.

Sample issue

1

Very Simple : Can be done using Ctrl + C/V

Most of the answers here directly or indirectly involve uploading the image somewhere else & then providing a link to it.

It can be done very simply by just copying any image and pasting it while editing Readme.md

  • Copying the image - You can just click on the image file and use Ctrl + C or may copy the screenshot image to your clipboard using the snipping tool
  • You can then simply do Ctrl + V while editing Readme.md

Guithub will automatically upload it to user-images.githubusercontent.com and a link to it will be inserted there

5

Basic Syntax

![myimage-alt-tag](url-to-image)
Marcus Vance

Marcus Vance

Cybersecurity & Digital Privacy Researcher

Marcus Vance is a cybersecurity auditor and technology writer dedicated to educating the public about online safety, data privacy regulations, enterprise security, and emerging cyber threats.