Add images to README.md on GitHub

Question

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?

Answer 1

In my case i use imgur and use the direct link this way.

![img](http://i.imgur.com/yourfilename.png)

Answer 2

LATEST

Wikis can display PNG, JPEG, or GIF images

Now you can use:

[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]

-OR-

Follow these steps:

1. On GitHub, navigate to the main page of the repository.

2. Under your repository name, click Wiki.

3. Using the wiki sidebar, navigate to the page you want to change, and then click Edit.

4. On the wiki toolbar, click Image.

5. In the "Insert Image" dialog box, type the image URL and the alt text (which is used by search engines and screen readers).
6. Click OK.

Refer Docs.

Answer 3

• 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](http://url/to/img.png) 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

Answer 4

I have solved this problem. You only need to refer to someone else's readme file.

At first,you should upload an image file to github code library ! Then direct reference to the address of the image file .

Answer 5

Just add an <img> tag to your README.md with relative src to your repository. If you're not using relative src, make sure the server supports CORS.

It works because GitHub support inline-html

<img src="/docs/logo.png" alt="My cool logo"/>
# My cool project and above is the logo of it

Observe here

Answer 6

In my case I wanted to show a print screen on Github but also on NPM. Even though using the relative path was working within Github, it wasn't working outside of it. Basically, even if I pushed my project to NPM as well (which simply uses the same readme.md, the image was never showing.

I tried a few ways, at the end this is what worked for me:

![Preview](https://raw.githubusercontent.com/username/project/master/image-path/image.png)

I now see my image correctly on NPM or anywhere else that I could publish my package.