How to 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?

http://www.jefclaes.be/2012/04/add-images-to-github-readme.html — Explosion Pills, Jan 24 '13 at 05:45
Duplicate of http://stackoverflow.com/questions/10189356/how-to-add-screenshot-to-readmes-in-github-repository which was posted in 2012. — leetNightshade, Dec 22 '13 at 20:00
Possible duplicate of [How to add screenshot to READMEs in github repository ?](http://stackoverflow.com/questions/10189356/how-to-add-screenshot-to-readmes-in-github-repository) — Marcus, Mar 18 '17 at 09:10

score 2463 · Accepted Answer · edited Apr 22 '20 at 06:44

2463

Try this markdown:

![alt text](http://url/to/img.png)

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

![alt text](https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true)

edited Apr 22 '20 at 06:44

Kev

14,115
14
75
106

answered Jan 24 '13 at 05:46

captainclam

31,577
8
44
55

198

You should also consider using [relative links](https://help.github.com/articles/relative-links-in-readmes) – mgalgs Jan 21 '14 at 18:00
71

Relative links are not a great use here, imagine your readme is also displayed on npm that does not host the image in this way - it needs to link to GitHub. Image srcs should be on the https://github.com domain, not the https://raw.github.com subdomain and not the https://raw.githubusercontent.com domain. – Lee Crossley Jun 24 '14 at 06:25
I just tried it by right-clicking on an image in my project, copying the link, and putting it in the README.md. That gave me the github.com domain as you suggest, but although it displayed fine on github, it did not display fine on my local copy. On the other hand, using raw.github.com and deleting "blob/" from the path displayed fine on my local computer. So, I would say the accepted answer here is correct as is. – Colin Keenan Sep 30 '14 at 23:05
6

I actually ended up going with the relative paths (which for me is just the name of the image file because I have everything in root). I had been maintaining 2 copies of the README.md, one for local installation in /usr/share/projectname/docs, and one for github. Now, I can just use the same README.md for both since the image filenames work fine in both cases. If I want to post a copy of parts of my README somewhere else, I'll either have to host the images somewhere else or put in the raw.github.com url. – Colin Keenan Sep 30 '14 at 23:23
36

GitHub themselves recommend relative paths: https://help.github.com/articles/relative-links-in-readmes/ One major downside of absolute paths is that, if the image gets moved in master, other branches that still point to the old URL will break. – Jack O'Connor Oct 02 '14 at 23:54
How would you create a clickable image , which goes to a certain URL ? – android developer May 25 '15 at 23:15
Note, Github's default markdown interpreter wraps the image inside an anchor tag, which may not be what you always want. – Cerin Sep 02 '16 at 03:08
I think that relative links break on npm package descriptions, which pull from `README.md`s – williaster Jul 16 '17 at 00:02
What is the differente between `[[link]]` and `![alt-text](link)` – Andrea Bergonzo Sep 23 '17 at 01:22
I found that I have to use the address listed when going to that image in Github which is different from what people are saying here. `![title](https://github.com/username/reponame/blob/master/subfolders.../filename.jpg)` Notice the "blob" term in the filename. The answers here didn't work for me in 2017. – Ryan Nov 08 '17 at 15:52
You can use relative links to show images in your readme file on Github. Check [this example](https://github.com/mohessaid/poem-js). – mohessaid Feb 02 '18 at 11:13
This auto-wraps the image in `
...
` tags, which isn't ideal. Is there any way to disable that? – Cerin Mar 31 '18 at 19:48
@captainclam I have implemented your solution and it's worked like a charm. But I am facing one issue, gif is playing only once. While in my local machine it is playing on repeat mode. I don't know why GitHub plays it only once. Any Help is appreciated! Thank you – iGatiTech Jul 19 '18 at 05:39
6

Currently suggested domain doesn’t seem to work and the link should be like this: `https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true` – Slavik Shynkarenko Sep 11 '18 at 10:02
In the event that you do not need a caption you can leave it blank. An example may be easier to understand in this case: `![](https://url/figure.png)` – amc Feb 08 '19 at 18:45
Relative path worked for me in github repository ```![alt text](/resources/images/roadmap.png)``` – Dhiren Hamal Oct 18 '19 at 05:16
1

You can Upload image to Repo and then go to image, click on download and get the link and add it to the readme file: `![alt text](link to download image)` – Harsh Patel Oct 24 '19 at 06:13
Raw version comes with`?token=TOKEN` it stops working after a while – Ashish Kamble Feb 11 '21 at 08:34

score 614 · Answer 2 · edited Dec 03 '20 at 19:58

614

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)

edited Dec 03 '20 at 19:58

Michael Šòdéké

31
9

answered Oct 08 '15 at 03:18

resultsway

8,938
5
29
38

30

Yes. This is by far the easiest way unless you're worried about performance.I'd note that this is relative to the *directory* not the *repo*, so if you have 'myimage.png' in the same dir as 'about_pics.md' then the markup is:`![What is this](myimage.png)` – Rich Mar 08 '17 at 02:06
8

This is an awesome solution because 1) it works 2) images are also shown in a local viewer, with no need of internet access – Régis B. May 22 '17 at 10:03
2

@Rich can you expand on your comment regarding performance. What performance issues are there with the relative path approach? – Lea Hayes Sep 09 '17 at 18:41
Oh, I just thought that since this retrieves the image from the repo, it's intrinsically going to do more work than having the images on a CDN or whatever. – Rich Sep 10 '17 at 22:27
2

This path is relative to what? – Dims Jul 15 '18 at 14:46
Your github folder is the root so its relative to the root of the github folder. if you have $HOME/mygithub_folder/doc/img.jpg? then just use doc/img.jpg in your $HOME/mygithub_folder/README.md – resultsway Aug 16 '18 at 18:15
relative to what? – xiaodai Nov 13 '18 at 23:52
@resultsway so `relative/path/to/img.jpg` is the same as `/relative/path/to/img.jpg`? – Dims Nov 14 '18 at 14:35
1

The `?raw=true` was the secret sauce that finally got this to work for me. – KillerRabbit Feb 05 '19 at 19:40
Has anyone figured out how to get this working in a preview or PR? – kingthorin Feb 28 '19 at 15:26
3

As pointed out by Lee Crossley, you should **avoid relative links** because they break when your readme is displayed on npm. Instead, **link to image src on github.com domain** with "?sanitize=true" flag if the image format is something like SVG. See more details at this SO answer: https://stackoverflow.com/a/16462143/6798201 – AlienKevin Mar 28 '19 at 12:02
It's relative to the README.md position. I have that readme in a docs folder and then images below with my screenshots, so I do `![Image](images/ss_apps.png)` – cdsaenz Jul 03 '19 at 22:31
Thanks, a relative path of `images/file.png` worked for me. Just to point out: I had to add `?raw=true` to the URL. Otherwise the image was not displayed (but a broken icon). – phi Aug 05 '20 at 14:00

score 314 · Answer 3 · edited Sep 18 '18 at 19:18

314

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:

https://www.youtube.com/watch?v=nvPOUdz5PL4

edited Sep 18 '18 at 19:18

Satish N Ramteare

187
1
9

answered Oct 28 '14 at 06:03

Ahmad Ajmi

5,905
3
29
51

33

As far as I understand you do not really need to *save* the issue. This way you do not really need those dummy tickets in the Issue Tracker. Question is if this is a "safe" method, meaning if GitHub will detect (after some time) that the image is orphaned and therefore delete it from the GitHub CDN ?? – peterh Oct 23 '16 at 09:11
5

This answer worked perfectly for me and didn't need to save the new issue within the repo. I've found a video on Youtube that explains that in details: https://www.youtube.com/watch?v=nvPOUdz5PL4. – Francislainy Campos Jun 14 '18 at 14:10
1

This answer works, and requires little effort. The issue can be discarded, but the URL for the image persists. The image URL is in the form of: *https://user-images.githubusercontent.com/...* – Sabuncu Nov 29 '18 at 19:48
6

This is a great trick! But does anyone know the answer to @peterh's question? Will GitHub periodically purge images that are orphaned (i.e. doesn't have an issue attached to it)? – Johnny Oshika Dec 06 '18 at 17:49
1

@JohnnyOshika I doubt anyone outside of github could definitively answer that. It might be dependent on what "user-images.githubusercontent.com" is used for. If it is only for images uploaded to comments, then it is plausible that they could scan for the missing data relation and remove the image. If its more general, it may be difficult to definitely determine that there are no references to the file, making it either computationally expensive or challenging to determine that it can be deleted without issues. – yourbuddypal Feb 21 '19 at 22:07
1

The fact that this is the easiest way should be an embarrassment to GitHub. After 15 minutes messing about with Wiki, gh-pages and github.io, I'm just going to use this solution (again). – joeytwiddle Jul 11 '19 at 03:21
Awesome. I found this to be the easiest too. – JChat Sep 09 '19 at 16:37
I just would like to say that, __it is not safe__ even for the hosting service in this way, you don't even know which day suddenly they will stop hosting your image. Simply put the image in the repo and follow this. https://stackoverflow.com/a/53771381/10189759 – Luk Aron Oct 31 '19 at 05:10
@LukAron you think, or you know it is not save? – Blechdose Feb 17 '20 at 07:32
@Blechdose Just by my first intuition, the possibility of losing that host image is considerable. – Luk Aron Feb 17 '20 at 13:34
uploading to an issue isn't needed, upload to ur repo (recommended) or use an image hosting provider. – Samega 7Cattac Sep 20 '20 at 14:48

score 184 · Answer 4 · answered Jul 08 '16 at 20:07

184

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)

answered Jul 08 '16 at 20:07

17

No, I don't think adding screenshots to the git repo is a good practice. Especially not at the root. Ahmad Ajmi's answer is much better – Arnaud P Oct 10 '16 at 12:27
34

Not at the root but you can easily adapt this to `docs/images` or what ever, small png screenshots are ok IMHO – Christophe Roussy Jan 23 '17 at 10:12
7

This should be the accepted solution, esp. with Christophe's suggestion to put the images under the doc/ tree/ – Mike Ellis Apr 11 '17 at 21:01
perfect..!! if the png is in another folder. Simply, add the path "folderName/screenshot.png" – Soumen Mar 22 '18 at 16:43
I found your answer useful for my case: I'm on Gitlab and I use `logo.png` pictures at the root of the repo to set an avatar to the repo. I wanted to include this pic to the README.md. – avi.elkharrat Oct 31 '18 at 10:02
in case it helps: I found PNG format seems to work, where SVG did not (perhaps how our gitlab server is configured - it seems to serve up SVG as text, event with ?raw – Sean Nov 04 '18 at 18:37
i like this one. simple. – Aaronium112 Sep 03 '20 at 15:20

score 104 · Answer 5 · edited Jun 29 '18 at 11:15

104

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>

edited Jun 29 '18 at 11:15

Josh Habdas

6,370
2
53
55

answered Jan 30 '16 at 04:45

Evin1_

10,198
8
38
47

1

When you using HTML tag(s) inside you markdown file. It will be ignored by **Pandoc**, a universal document converter. – X.Creates Apr 06 '16 at 05:37
1

This is best so it can be centered or placed on one side (for smaller images, at least.) – Alexis Wilke Jun 21 '18 at 04:17
1

How do you specify the relative path? It's not relative to README.md (in all cases?). – friederbluemle Sep 10 '18 at 18:45

paulmelnikow · Answer 6 · 2020-05-05T03:56:29.810

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:

https://github.com/github/{repository}/blob/assets/cat.png

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

This is a good complement to the accepted answer. Assets are tracked, images are not in master, no clutter. Just be careful about the `git reset --hard`; make sure changes were committed. — dojuba, Sep 30 '18 at 09:40
In the wild on your machine. You can point it to wherever the file happens to be (`~/Downloads`, `/tmp`, etc.). — paulmelnikow, Dec 13 '18 at 19:44
I swear I remember there being a directory that you can make that doesn't show up on Github. Until I can track that down, this post seems like the next best thing to use. Thanks! — Shadoninja, May 03 '20 at 00:45
I don't get what is the advantage of creating new branch for assets. Why not just keep the assets in the same branch, with files that use those assets? — ArtuX, May 19 '21 at 09:04

Darush · Answer 7 · 2017-07-18T12:56:37.253

30

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

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

edited Jul 18 '17 at 12:56

answered Jun 14 '17 at 10:01

Darush

9,625
7
53
53

B12Toaster · Answer 8 · 2019-07-24T06:37:50.353

27

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).

edited Jul 24 '19 at 06:37

answered Sep 25 '15 at 20:48

B12Toaster

8,944
5
48
48

2

Love this tool! – Dan Sep 16 '18 at 14:47
1

I too love this tool, this should be Git's default feature!! – shridutt kothari Dec 22 '19 at 13:45
This is awesome! – Ari K Mar 17 '21 at 01:56

abe312 · Answer 9 · 2016-10-12T19:12:29.830

20

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

edited Oct 12 '16 at 19:12

answered Oct 12 '16 at 19:02

abe312

4,155
30
21

This is the easiest way to add them in my opinion. Simply drag them into the box, copy the address and paste it into your readme with captions below. Boom, you're done. – Joe Hill Jul 19 '17 at 03:57

score 18 · Answer 10 · edited Jun 20 '20 at 09:12

18

Basic Syntax

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

Here:

my-image-alt-tag : text that will be displayed if image is not shown.
url-to-image : whatever your image resource is. URI of the image

Example:

![stack Overflow](http://lmsotfy.com/so.png)

This will look like the following:

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 21 '16 at 16:09

alamin

1,791
1
22
28

rocketspacer · Answer 11 · 2018-07-08T17:46:09.210

15

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

edited Jul 08 '18 at 17:46

answered Mar 25 '18 at 20:27

rocketspacer

3,181
3
31
45

score 13 · Answer 12 · edited Sep 26 '19 at 05:36

13

Use tables to stand out, it will give separate charm to it

Table Syntax is:

Separate each column cell by symbol |

and table header (First row) by 2nd row by ---

| col 1 | col 2 |
|------------|-------------|
| image 1 | image 2 |

output

Now just put <img src="url/relativePath"> at image 1 and image 2 if you are using two images

Note: if using multiple images just include more columns, you may use width and height attribute to make it look readable.

Example

| col 1 | col 2 |
|------------|-------------|
| <img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_582,c_limit/so-logo-s.jpg" width="250"> | <img src="https://mk0jobadderjftub56m0.kinstacdn.com/wp-content/uploads/stackoverflow.com-300.jpg" width="250"> |

Spacing does not matter

Output image

helped by : adam-p

edited Sep 26 '19 at 05:36

user11058264

3
3

answered Mar 04 '19 at 03:38

Shashankesh Upadhyay

335
3
6

6

The use of tables is irrelevant to the topic of the OP's question. – mhucka Sep 02 '19 at 19:18
1

adding screenshots of an app can be done this way nicely, thanks – UpaJah Oct 22 '19 at 08:18
Use CSS instead of Tables, it will rock your world. – jeffmcneill Feb 25 '20 at 05:56

score 13 · Answer 13 · answered May 25 '20 at 10:07

Step by step process, First create a folder ( name your folder ) and add the image/images that you want to upload in Readme.md file. ( you can also add the image/images in any existing folder of your project. ) Now,Click on edit icon of Readme.md file,then

![](relative url where images is located/refrence_image.png)  // refrence_image is the name of image in my case.

After adding image, you can see preview of changes in the, "Preview Changes" tab.you will find your image here. for example like this, In my case,

![](app/src/main/res/drawable/refrence_image.png)

app folder -> src folder -> main folder -> res folder -> drawable folder -> and inside drawable folder refrence_image.png file is located. For adding multiple images, you can do it like this,

![](app/src/main/res/drawable/refrence_image1.png)
![](app/src/main/res/drawable/refrence_image2.png)
![](app/src/main/res/drawable/refrence_image3.png)

Note 1 - Make sure your image file name does not contain any spaces. If it contain spaces then you need to add %20 for each space between the file name. It's better to remove the spaces.

Note 2 - you can even resize the image using HTML tags, or there are other ways. you can google it for more. if you need it.

After this, write your commit changes message, and then commit your Changes.

There are many other hacks of doing it like, create a issue and etc and etc. By far this is the best method that I have came across.

adding more images like this is not worked for me. Is there any other way to do that? — Kavindu Gayantha, Oct 21 '20 at 04:54
strongly suggest adding alt-text to make things more accessible for people using screenreaders — Mattwmaster58, Jan 05 '21 at 03:14

score 10 · Answer 14 · answered Dec 13 '18 at 23:10

10

You can just do:

git checkout --orphan assets
cp /where/image/currently/located/on/machine/diagram.png .
git add .
git commit -m 'Added diagram'
git push -u origin assets

Then you can just reference it in the README file like so:

![diagram](diagram.png)

answered Dec 13 '18 at 23:10

Daniel

9,020
8
63
101

1

Perfect and crisp. – Biswajit Das Dec 15 '18 at 02:05
1

it works, Actually, I think this answer should be accepted – Luk Aron Oct 31 '19 at 05:08

score 10 · Answer 15 · answered Jul 16 '20 at 06:49

10

In new Github UI, this works for me -

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

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

answered Jul 16 '20 at 06:49

Prashant Gaikwad

2,229
15
23

score 8 · Answer 16 · answered May 12 '15 at 17:15

8

I usually host the image on the site, this can link to any hosted image. Just toss this in the readme. Works for .rst files, not sure about .md

.. image:: https://url/path/to/image
   :height: 100px
   :width: 200 px
   :scale: 50 %

answered May 12 '15 at 17:15

Adam Hughes

9,853
6
52
89

score 8 · Answer 17 · answered Dec 13 '16 at 02:00

8

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

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

answered Dec 13 '16 at 02:00

Kegham K.

1,449
15
31

JGC · Answer 18 · 2018-02-10T16:57:13.403

You can link to images in your project from README.md (or externally) using the alternative github CDN link.

The URL will look like this:

https://cdn.rawgit.com/<USER>/<REPO>/<BRANCH>/<PATH>/<TO>/<FILE>

I have an SVG image in my project, and when I reference it in my Python project documentation, it does not render.

Project link

Here is the project link to the file (does not render as an image):

https://github.com/jongracecox/anybadge/blob/master/examples/awesomeness.svg

Example embedded image:

Raw link

Here is the RAW link to the file (still does not render as an image):

https://raw.githubusercontent.com/jongracecox/anybadge/master/examples/awesomeness.svg

Example embedded image:

CDN link

Using the CDN link, I can link to the file using (renders as an image):

https://cdn.rawgit.com/jongracecox/anybadge/master/examples/awesomeness.svg

Example embedded image:

This is how I am able to use images from my project in both my README.md file, and in my PyPi project reStructredText doucmentation (here)

score 8 · Answer 19 · answered Aug 14 '18 at 18:10

8

JUST THIS WORKS!!

take care about your file name uppercase in tag and put PNG file inroot, and link to the filename without any path:

![Screenshot](screenshot.png)

answered Aug 14 '18 at 18:10

Farbod Aprin

432
5
11

Here (screenshot.png) is relative path from readme.md file. e.g., I had (images/landing_page.png) – Abhinav Dobhal Sep 06 '20 at 03:14

ylgwhyh · Answer 20 · 2016-07-01T07:44:18.883

7

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 .

edited Jul 01 '16 at 07:44

answered Feb 25 '16 at 03:04

ylgwhyh

1,438
15
20

CrandellWS · Answer 21 · 2020-04-19T23:56:52.767

This Answer can also be found at: https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md

Display images from repo using:

prepend domain: https://raw.githubusercontent.com/

append flag: `?sanitize=true&raw=true`

use `<img />` tag

Eample url works for svg, png, and jpg using:

Domain: raw.githubusercontent.com/
UserName: YourUserAccount/
Repo: YourProject/
Branch: YourBranch/
Path: DirectoryPath/
Filename: example.png

Works for SVG, PNG, and JPEG

 - `raw.githubusercontent.com/YourUserAccount/YourProject/YourBranch/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true`

Working example code displayed below after used:

**raw.githubusercontent.com**:
<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png?raw=true" />

<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true" />

raw.githubusercontent.com:

Thanks: - https://stackoverflow.com/a/48723190/1815624 - https://github.com/potherca-blog/StackOverflow/edit/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/readme.md

At least for .png and raw.githubusercontent.com sanitize=true doesn't work and should be removed. raw=true works fine. https://github.com/sphinxy/AppDynamics.Playground/blob/master/README.md — Danila Polevshikov, Sep 10 '19 at 14:22
https://rawgit.com/ shut down in 2018 and should not be used any more; you should remove it from this answer. https://raw.githubusercontent.com/, which you also mention, is the closest alternative. — Rory O'Kane, Apr 18 '20 at 05:36

score 6 · Answer 22 · answered Mar 03 '19 at 09:19

6

There are 2 simple way you can do this ,

1) use HTML img tag ,

2) ![](the path where your image is saved/image-name.png)

the path would you can copy from the URL in the browser while you have opened that image. there might be an issue occur of spacing so make sure if there is any space b/w two words of path or in image name add-> %20. just like browser do.

Both of them will work , if you want to understand more you can check my github -> https://github.com/adityarawat29

answered Mar 03 '19 at 09:19

Aditya Singh Rawat

83
1
6

This has worked for me. Having an image in a folder "apps" under the README.md I've used: `![](images/ss_apps.png) ` – cdsaenz Jul 03 '19 at 22:28
1

I am surprised that only Aditya mentioned that spaces are a problem, and in a rather stupid way too - no errors, but your syntax is simply displayed like no such feature would even exist. Upvote from me for mentioning this. – Tammi Nov 25 '19 at 12:18

score 5 · Answer 23 · answered Jul 27 '16 at 23:31

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.

Dimitrios Desyllas · Answer 24 · 2017-12-01T11:47:35.393

In case you need to upload some pictures for documentation, a nice approach is to use git-lfs. Asuming that you have installed the git-lfs follow these steps:

Intialize git lfs for your each image type:

git lfs *.png
git lfs *.svg
git lfs *.gif
git lfs *.jpg
git lfs *.jpeg

Create a folder that will be used as image location eg. doc. On GNU/Linux and Unix based systems this can be done via:
```
cd project_folder
mkdir doc
git add doc
```
Copy paste any images into doc folder. Afterwards add them via git add command.
Commit and push.
The images are publicly available in the following url:

https://media.githubusercontent.com/media/^github_username^/^repo^/^branch^/^image_location in the repo^

Where: * ^github_username^ is the username in github (you can find it in the profile page) * ^repo_name^ is the repository name * ^branch^ is the repository branch where the image is uploaded * ^image_location in the repo^ is the location including the folder that the image is stored.

Also you can upload the image first then visit the location in your projects github page and navigate through until you find the image then press the download button and then copy-paste the url from the browser's address bar.

Look this from my project as reference.

Then you can use the url to include them using the markdown syntax mentioned above:

![some alternate text that describes the image](^github generated url from git lfs^)

Eg: Let us suppose we use this photo Then you can use the markdown syntax:

![In what order to compile the files](https://media.githubusercontent.com/media/pc-magas/myFirstEnclave/master/doc/SGX%20Compile%20workflow.png)

score 5 · Answer 25 · answered Aug 29 '18 at 19:40

I am just extending or adding an example to the already accepted answer.

Once you have put the image on your Github repo.

Then:

Open the corresponding Github repo on your browser.
Navigate to the target image file Then just open the image in a new tab.
Copy the url
And finally insert the url to the following pattern ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

On my case it is

![In a single picture](https://raw.githubusercontent.com/shadmazumder/Xcode/master/InOnePicture.png)

Where

shadmazumder is my username
Xcode is the projectname
master is the branch
InOnePicture.png is the image, On my case InOnePicture.png is in the root directory.

This is the only one that worked flawlessly for me. No confusion about paths, whether "master" refers to a directory or a branch, where the root start is, etc. Only caveat is Firefox (72) does not allow you to open image in separate tab so this is Chrome only for now I think. — Thomas Browne, Apr 14 '20 at 15:32

LuisDev99 · Answer 26 · 2019-12-18T19:49:07.190

I have found another solution but quite different and i'll explain it

Basically, i used the tag to show the image, but i wanted to go to another page when the image was clicked and here is how i did it.

<a href="the-url-you-want-to-go-when-image-is-clicked.com" />
<img src="image-source-url-location.com" />

If you put it right next to each other, separated by a new line, i guess when you click the image, it goes to the tag which has the href to the other site you want to redirect.

score 3 · Answer 27 · edited Jun 20 '20 at 09:12

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:

On GitHub, navigate to the main page of the repository.
Under your repository name, click Wiki.
Using the wiki sidebar, navigate to the page you want to change, and then click Edit.
On the wiki toolbar, click Image.
In the "Insert Image" dialog box, type the image URL and the alt text (which is used by search engines and screen readers).
Click OK.

Refer Docs.

Josh Habdas · Answer 28 · 2018-10-17T13:32:59.120

3

Consider using a table if adding multiple screenshots and want to align them using tabular data for improved accessibility as shown here:

high-tea

If your markdown parser supports it you could also add the role="presentation" WIA-ARIA attribute to the TABLE element and omit the th tags.

edited Oct 17 '18 at 13:32

answered Oct 17 '18 at 13:09

Josh Habdas

6,370
2
53
55

score 2 · Answer 29 · answered Mar 24 '20 at 07:39

There's yet another option I haven't seen mentioned. You can simply create another repository under your user or organization called "assets". Push your images to this repo and reference them from your other repos:

![alt text](https://raw.githubusercontent.com/my-org/assets/master/folder/logo.png)

I've done this in one of my repos and it suits me fine. I can version my README images for all of my projects independently of my code, but still keep them all in one place. No issues or branches or other easily misplaced artifacts required.

score 2 · Answer 30 · answered Mar 01 '21 at 17:52

You can now drag and drop the images while editing the readme file.

Github will create a link for you which will be in the format of:

https://user-images.githubusercontent.com/******/********.file_format

Alternatively, at the bottom of the file, it says "Attach files by dragging & dropping, selecting or pasting them". If you click on that one, it will give you an option to upload a file directly or you can just paste it!

score 2 · Answer 31 · answered Apr 11 '21 at 07:23

You Can use

![A test image](image.png)

Where ![A test image] is your alt text and (image.png) is the link to your image.

You can have the image on a cloud service or other online image hosting platforms Or you can provide the image link from the repository if it is in the repo

You can also make a specific folder inside your repository dedicated to your readme images

M.Innat · Answer 32 · 2018-08-05T14:07:49.540

1

We can do this simply,

create a New Issue on GitHub
drag and drop images on the body div of Issue

after a few seconds, a link will be generated. Now, copy the link or image URL and use it any supported platform.

edited Aug 05 '18 at 14:07

answered Jul 08 '18 at 12:03

M.Innat

8,673
5
27
46

score 1 · Answer 33 · answered Jan 18 '20 at 10:16

1

Add image in your repository from upload file option then in README file

![Alt text]("enter repository image URL here")

answered Jan 18 '20 at 10:16

Marium Jawed

351
2
8

score 0 · Answer 34 · answered Apr 27 '20 at 20:10

If you want to show an image hosted at any website (say url is "http:// abc.def.com/folder/image.jpg") then in your README.md file use the below syntax:

![alt text](<http:// abc.def.com/folder/image.jpg>)

Just browse to the image in your browser (may be by clicking on the image). It can be any website, including yours or somebody else's github hosted image.
Copy the url from the browser address bar, that is your "image_url" to be used in above referred syntax.

For images hosted in your own github repository you can use relative path in addition to the above url format
![alt text](<path_relative_to_current_github_location/image.jpg>)

If the image is located in the same folder as the README.md file (special case of relative path url), then you can use:
![alt text](<image.jpg>)

Note the angular brackets "<" and ">" enclosing the url. Sometimes these are required for the url to work.

How to add images to README.md on GitHub?

34 Answers34

It's much simpler than that.

Basic Syntax

Here:

Example:

This will look like the following:

Project link

Raw link

CDN link

Display images from repo using:

prepend domain: https://raw.githubusercontent.com/

append flag: `?sanitize=true&raw=true`

use `<img />` tag

LATEST

Linked

Related

How to add images to README.md on GitHub?

34 Answers34

It's much simpler than that.

Basic Syntax

Here:

Example:

This will look like the following:

Project link

Raw link

CDN link

Display images from repo using:

prepend domain: https://raw.githubusercontent.com/

append flag: ?sanitize=true&raw=true

use <img /> tag

LATEST

Linked

Related

append flag: `?sanitize=true&raw=true`

use `<img />` tag