36

I'm a developer, I need many screenshots to put in readme.md file where to store or host it? I found out that some people use https://user-images.githubusercontent.com/{path}/{filename} to host their image and link them with readme.md file. How to put images there??

Pooja Bhatia
  • 371
  • 1
  • 3
  • 4

7 Answers7

30

You can create a .github/images directory in your repo and add all your assets there. Assets added here will be available on

https://raw.githubusercontent.com/{github_user_name}/{repo_name}/{branch}/.github/images/{asset_name}.{asset_extension}

Once you push .github/images directory to remote your assets should be available through the mentioned link.

And https://user-images.githubusercontent.com/ is used by GitHub to store images added in issues, PR's, etc.,

Hope it helps!

UPDATE:

You can also create an assets directory in the root of your repo and use a relative path to the image.

/assets/{asset_name}.{asset_extension}

![Alt Text](/assets/{asset_name}.{asset_extension})

With this, images can be previewed without actually pushing to remote.

Hosting on user-images.githubusercontent.com subdomain

If you do not intend to store any images in your repository, you can always use this https://user-images.githubusercontent.com/

To host your images in user-images subdomain you can do the following

  1. Click New Issue this will open up the issue creator.
  2. Drag and Drop or Upload your image in the body content
  3. Wait for upload completion and copy the URL for the image.
  4. Cancel the issue creation and continue.

But you will not have access to these images once uploaded, you cannot delete them. You can always contact GitHub Support if required to delete.

Sai Krishna
  • 597
  • 4
  • 16
  • 1
    You may want to fix the example URL to make it more general, currently it seems to contain your username and repository name. – GoodDeeds May 02 '20 at 02:56
  • But adding images in repository will create unwanted bulk to the project. Any other good alternative. And if I have to get this https://user-images.githubusercontent.com I have to post an issue and upload Image there am I right ? – Pooja Bhatia May 02 '20 at 06:21
  • Yes. Opening an issue isn't necessary. 1. Click New Issue. 2. Upload the image in issue body wait for upload completion and grab the URL. 3. Abort the process. But, I should warn you that you will not have access to images (you cannot delete it once uploaded if you want, have to contact GitHub Support). – Sai Krishna May 02 '20 at 07:14
  • @PoojaBhatia I have updated the answer with more details! Thanks! – Sai Krishna May 02 '20 at 07:34
  • Thanks you sir for helping, got my answer. But will GitHub delete those images as I'm just opening issue and cancelling it. – Pooja Bhatia May 02 '20 at 11:35
  • No once uploaded images will not be deleted, unless you request. – Sai Krishna May 02 '20 at 11:40
  • 2
    Github may at any time introduce a garbage collector that runs every so often to delete "issue" images that are not referenced in any github issue. Just because it works for you at the time of writing doesn't mean it is a good solution. – Joachim Wagner Oct 17 '20 at 13:47
  • Thank you for ur thoughts, I am well aware of that and quite surprised that its nt implemented yet. Lot of space is wasted due to this. And If u had read the previous comments u might hav noticed that I updated answer only after question author wanted to know how to do the issue upload process. My main answer was to keep the images in repo as assets or something. Also, many answers get outdated as technology advances and new things come into place, so there is never a good solution in my perspective. We utilise whatever works best and improvise it over time. – Sai Krishna Oct 18 '20 at 07:48
  • Any reason why that directory is named `.github/images` and not just a normal directory outside of `.github`? – Jimmy R.T. Jan 28 '21 at 15:28
  • For some reason, this isn't working for me. – codesnerd Apr 25 '21 at 10:50
  • @JimmyR.T. No reason to have images, it can be named anything. Also, there is no limitation to keep this directory under the `.github` directory, Please check the `UPDATE` part of the answer. Thanks – Sai Krishna Apr 26 '21 at 11:54
  • 1
    @codesnerd The answer has 2 options. Could you please share with us which one is not working or possibly a dummy repo of the non-working version. So that it would be easy to check and help with it. Thanks. – Sai Krishna Apr 26 '21 at 11:56
  • @KRRISH96 I tried the `.github` directory method but somehow it didn't work for me. However, simply dragging and dropping the image into the `README` worked just fine. – codesnerd May 12 '21 at 18:52
  • 1
    Re: user-images.githubusercontent.com "But you will not have access to these images once uploaded, you cannot delete them. You can always contact GitHub Support if required to delete." This is the weird part. I wish I could access this. It would be nice if GitHub had a "/images" solution build-in somehow. – Xonatron Jan 22 '22 at 16:25
  • I wouldn't worry much about it, AFAIK user-images.githubusercontent.com is not intended for user controlled storage it's for GitHub. Its ideal to have a dedicated images directory in repo itself. – Sai Krishna Jan 22 '22 at 17:05
  • `4. Cancel the issue creation and continue.` Has been helpful, thank you. – tash Feb 05 '22 at 22:19
21

Just drag and drop your image from your local pc to github readme in editable mode.

Abhishek Kumar
  • 211
  • 2
  • 2
6

I took a screenshot of a diagram and tried to paste it directly into a comment in GitHub and it was automatically uploaded to "https://user-images.githubusercontent.com/" and embedded as a markdown tag. Then I tried to paste the same tag into a readme.MD with the same link and worked for me. Comment

Freison Castro
  • 92
  • 1
  • 2
5

When you are editing the readme file on github, you have to drag the file you want to add in this specific box. That worked for me. If I dropped it anywhere else, it wouldn't load.

Github readme screenshot

Gre3n
  • 146
  • 1
  • 6
1

While editing readme.md in GitHub UI, paste the image from the clipboard directly in the readme, and the image is automatically uploaded into user-images.gitHubusercontent, and the link is updated in the readme to show the image.

reddy nishanth
  • 396
  • 6
  • 11
1

To add or store them just open the issues click on new issue and drag and drop your desired image in comment section and wait for it to upload in user-images.gitHubusercontent. when its done just copy that and paste it to your README.md file

Maitri_Shah
  • 11
  • 2
0

You can simply put the file where you want it in yours repository, click on the file from the github.com page and left click the Raw button or right click Download button and select Copy link address. It will show the full path url, then you can just put it into any Markdown text.

Andry
  • 2,273
  • 29
  • 28