'How to host image at https://user-images.githubusercontent.com/{path}/{filename}?

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



Solution 1:[1]

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.

Solution 2:[2]

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

Solution 3:[3]

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

Solution 4:[4]

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.

Solution 5:[5]

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

Solution 6:[6]

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

Solution 7:[7]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 developer033
Solution 2 Abhishek Kumar
Solution 3 Freison Castro
Solution 4 reddy nishanth
Solution 5 Maitri_Shah
Solution 6 Gre3n
Solution 7