Add Image to GitHub Readme.md from Google Drive
How to insert an Image in a github-flavoured markdown format and be able to adjust its size
- Upload the image
image.jpg
to your Google Drive - Click the
get link
button at the top right corner
- Change the permission type to
Anyone with the link
- Copy (to clipboard) only the file ID
<FILEID>
from the full link as shown (highlighted in blue) and clickDone
. At the time of writing the shareable link takes the form:
https://drive.google.com/file/d/``/view?usp=sharing
- Insert Image in markdown using the copied file id
<FILEID>
and anchor tag as shown:
<a href="https://drive.google.com/uc?export=view&id=<FILEID>"><img src="https://drive.google.com/uc?export=view&id=<FILEID>" style="width: 650px; max-width: 100%; height: auto" title="Click to enlarge picture" />
Note that the brackets '<' and '>' are not to be present with the file ID. The size of the image can be adjusted in the style attribute by adjusting the width and the height as needed. Clicking the rendered image will open it to its original size
For example, I have a.jpg
on the google drive.
Right click the image and click
Share...
Click
Advanced
and change theWho can access
option toPublic on the web - Anyone on the Internet
- Copy the
link to share
and you will have something likehttps://drive.google.com/file/d/<FILE_ID>/view?usp=sharing
- Copy the <FILE_ID> to make a link like this:
https://drive.google.com/uc?export=view&id=<FILE_ID>
- Insert image in Markdown as ususal using the link from step 4.
For example:![image](https://drive.google.com/uc?export=view&id=<FILE_ID>)
Example: I have this octocat image in google, and its file id is 1913oZeBZPBNiUuk8gu3ZSbLBA2l_VQtG
. You can try ![image](https://drive.google.com/uc?export=view&id=1913oZeBZPBNiUuk8gu3ZSbLBA2l_VQtG)
in your markdown file or even in this answer.
Hope this helps.