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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

In my case i use imgur and use the direct link this way     img  http   i imgur com yourfilename png

User · Answer

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

User · Answer

Just add an  lt img gt  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   lt img src   docs logo png  alt  My cool logo   gt    My cool project and above is the logo of it   Observe here

User · Answer

You can create a New Issue   upload drag  amp  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

User · Answer

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

User · Answer

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   lt http    abc def com folder image jpg gt     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   lt path relative to current github location image jpg gt    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   lt image jpg gt      Note the angular brackets   lt   and   gt   enclosing the url  Sometimes these are required for the url to work

User · Answer

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 nbsp  nbsp  nbsp  nbsp  nbsp  nbsp   col 2 nbsp  nbsp  nbsp  nbsp  nbsp  nbsp    ------------ -------------       image 1        image 2      output    Now just put  lt img src  url relativePath  gt  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 nbsp  nbsp  nbsp  nbsp  nbsp  nbsp   col 2 nbsp  nbsp  nbsp  nbsp  nbsp  nbsp    ------------ -------------       lt img src  https   media wired com photos 5926db217034dc5f91becd6b master w 582 c limit so-logo-s jpg  width  250  gt         lt img src  https   mk0jobadderjftub56m0 kinstacdn com wp-content uploads stackoverflow com-300 jpg  width  250  gt      Spacing does not matter  Output image    helped by   adam-p

User · Answer

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

User · Answer

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    lt a href  the-url-you-want-to-go-when-image-is-clicked com    gt   lt img src  image-source-url-location com    gt    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

User · Answer

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

User · Answer

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

User · Answer

Add image in your repository from upload file option then in README file    Alt text   enter repository image URL here

User · Answer

You can also use relative paths like   Alt text  relative path to img jpg raw true  quot Title quot    Also try the following with the desired  fileExtention    plot    directory 1 directory 2     directory n plot png

User · Answer

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

User · Answer

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

User · Answer

Commit your image  image png  in a folder  myFolder  and add the following line in your README md      Optional Text     master myFolder image png

User · Answer

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

User · Answer

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

User · Answer

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  quot Insert Image quot  dialog box  type the image URL and the alt text  which is used by search engines and screen readers    Click OK    Refer Docs

User · Answer

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

User · Answer

You can also add images with simple HTML tags    lt p align  center  gt     lt img src  your relative path here  width  350  title  hover text  gt     lt img src  your relative path here number 2 large name  width  350  alt  accessibility text  gt   lt  p gt

User · Answer

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  lt USER gt   lt REPO gt   lt BRANCH gt   lt PATH gt   lt TO gt   lt FILE gt    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

User · Answer

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

User · Answer

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

User · Answer

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 amp raw true  use  lt img   gt  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 amp raw true    Working example code displayed below after used     raw githubusercontent com     lt img src  https   raw githubusercontent com YourUserAccount YourProject master DirectoryPath Example png raw true    gt    lt img src  https   raw githubusercontent com YourUserAccount YourProject master DirectoryPath svgdemo1 svg sanitize true amp raw true    gt    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

User · Answer

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

User · Answer

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

User · Answer

Consider using a table if adding multiple screenshots and want to align them using tabular data for improved accessibility as shown here     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

User · Answer

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

[github] How to add images to README.md on GitHub?

Examples related to github

Examples related to markdown

Examples related to github-flavored-markdown

Examples related to readme