How to add screenshot to READMEs in github repository

Question

Is it possible to place a screenshot in README file in a GitHub repository  What s the syntax

User · Answer

The markdown syntax for displaying images is indeed:

![image](https://{url})

BUT: How to provide the url ?

You probably do not want to clutter your repo with screenshots, they have nothing to do with code
you might not want either to deal with the hassle of making your image available on the web... (upload it to a server... ).

So... you can use this awesome trick to make github host your image file. TDLR:

create an issue on the issue list of your repo
drag and drop your screenshot on this issue
copy the markdown code that github has just created for you to display your image
paste it on your readme (or wherever you want)

http://solutionoptimist.com/2013/12/28/awesome-github-tricks/

User · Answer

One line below should be what you looking for  if your file is in repository     ScreenShot  https   raw github com  username   repository   branch   path     if your file is in other external url    ScreenShot  https    url

User · Answer

JUNE 3  2020   WORKING ANSWER-  Upload your image to postimage org Copy  Github-Markdown-Url after uploading Image Insert in your ReadMe

User · Answer

add this to README   lt div align  center  gt       lt img src   screenshots screen1 jpg  width  400px  lt  img gt    lt  div gt

User · Answer

I googled a few similar questions and did not see any answers with my problem and its quite simple easy solution   Google Cloud Storage - a slightly different approach to images in READMEs  Here goes  like the OP  I wanted an image in my Github README  and  knowing the Markdown syntax for doing so  typed it in     My Image  https   storage cloud google com   MY BUCKET    MY IMAGE    You need to complete the actual substitutions above  e g  MY IMAGE image jpg  for this to work       But  wait   failure--there s no actual rendered photo  And the link is exactly as given by Google Storage          Github camo - Anonymous Images  Github hosts your images anonymously  yay  However  this presents an issue for Google storage assets  You need to get the generated url from your Google Cloud Console    I m sure there s a smoother way  however  simply visit your given URL endpoint and copy the long URL  Details   Instructions   Visit your storage console  https   console cloud google com storage browser   MY BUCKET  project   MY PROJECT  Click on the image you d like to display in Github  this brings up the  Object Details  page  Copy pasta that URL  the one starting with https not gs  into a new browser tab window Copy pasta the new generated URL -- it should be longer -- from your new browser tab window into your Github README file   Hopefully this helps speed up and clarify this issue for anyone else

User · Answer

I found that the path to the image in my repo did not suffice  I had to link to the image on the raw github com subdomain   URL format https   raw github com  USERNAME   REPOSITORY   BRANCH   PATH   Markdown example   Settings Window  https   raw github com ryanmaxwell iArrived master Screenshots Settings png

User · Answer

Even though there is already an accepted answer I would like to add another way to upload images to readme on GitHub    You need to create issue in your repo Drag and drop in the comment area your image After link for the image is generated insert it to your readme   More details you can find here

User · Answer

Method 1- Markdown way    Alt Text  https   raw github com  USERNAME   REPOSITORY   BRANCH   PATH     Method 2- HTML way   lt img src  https   link format same as above   width  100  height  100   gt    or   lt img src  https   link  style   width 100px   height 100px     gt    Note-  If you don t want to style your image i e resize remove the style part

User · Answer

Much simpler than adding URL Just upload an image to the same repository  like     Screenshot  screenshot png

User · Answer

First  create a directory folder  in the root of your local repo that will contain the screenshots you want added  Let   s call the name of this directory screenshots  Place the  images  JPEG  PNG  GIF   etc  you want to add into this directory    Android Studio Workspace Screenshot  Secondly  you need to add a link to each image into your README  So  if I have images named 1 ArtistsActivity png and 2 AlbumsActivity png in my screenshots directory  I will add their links like so     lt img src  screenshots 1 ArtistsActivity png  height  400  alt  Screenshot   gt   lt img src    screenshots 2 AlbumsActivity png  height  400  alt  Screenshot   gt    If you want each screenshot on a separate line  write their links on separate lines  However  it   s better if you write all the links in one line  separated by space only  It might actually not look too good but by doing so GitHub automatically arranges them for you   Finally  commit your changes and push it

User · Answer

Add image in repository from upload file option then in README file    Alt text   enter image url of repositoryhere

User · Answer

Markdown    Screenshot  http   url to img png    Create an issue regarding adding images Add the image by drag and drop or by file chooser Then copy image source Now add   Screenshot  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 use Markdown  README md    Provided that you have the image in your repo  you can use a relative URL      Alt text   relative path to img jpg raw true  Optional Title     If you need to embed an image that s hosted elsewhere  you can use a full URL    Alt text  http   full path to img jpg  Optional title     GitHub recommend that you use relative links with the  raw true parameter to ensure forked repos point correctly   The raw true parameter is there in order to ensure the image you link to  will be rendered as is  That means that only the image will be linked to  not the whole GitHub interface for that respective file  See this comment for more details   Check out an example  https   raw github com altercation solarized master README md  If you use SVGs then you ll need to set the sanitize attribute to true as well   raw true amp sanitize true   Thanks  EliSherer   Also  the documentation on relative links in README files  https   help github com articles relative-links-in-readmes  And of course the markdown docs  http   daringfireball net projects markdown syntax  Additionally  if you create a new branch screenshots to store the images you can avoid them being in the master working tree  You can then embed them using     Alt text       lt branch name gt  path to image png raw true  Optional Title

User · Answer

Add   ScreenShot  screenshot png  in the readme markdown as mentioned by many above  Replace screenshot png with the name of the image you uploaded in your repository  But here is a newbie tip when you upload the image  as I made this mistake myself   ensure that your image name does not contain spaces  My original image was saved as  quot Screenshot day month year id png quot   If you don t change the name to something like contentofimage png  it won t appear as an image in your readme file

User · Answer

With the images located in  screen-shots directory  The outer  lt div gt  allows the images to be positioned  Padding is achieved using  lt img width  desired-padding  height  0  gt     lt div align  center  gt           lt img width  45   src  screen-shots about PNG  alt  About screen  title  About screen  lt  img gt           lt img height  0  width  8px  gt           lt img width  45   src  screen-shots list PNG  alt  List screen  title  List screen  gt  lt  img gt   lt  div gt

User · Answer

To me the best way is -   Create an new issue with that repository on github and then upload the file in gif format To convert video files into gif format you can use this website http   www online-convert com  Submit the newly created issue  Copy the address of the uploaded file Finally in your README file put   demo  COPIED ADDRESS       Hope this will help

[github] How to add screenshot to READMEs in github repository?

Examples related to github

Examples related to markdown