CODEWITHSUNDEEP
githubgoogle-drive-apigithub-flavored-markdown
GokulDAS027
GokulDAS027

Reputation: 714

Add Image to GitHub Readme.md from Google Drive

I have the image in Drive, How could it be added to the Readme.md so as to display the image in readme. I had tried with the shared link, but it isn't working.

Upvotes: 40

Views: 24028

Answers (5)

vondravl
vondravl

Reputation: 140

Not sure if it was again updated, this hack works for now

![test](https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fdrive.google.com/uc?id=<YOUR_ID>)

Upvotes: 1

Elias Prado
Elias Prado

Reputation: 1817

If you could not access any solution you can kind of use brute force:

  1. Open developer console - use Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).
  2. Click Ctrl + Shift + C to access the hover effect and click over the image.
  3. The url of the image will appear, click to open into another screen or copy the link enter image description here
  4. Add the link to your .md file: ![Alt text](<the link of the image>)

Upvotes: 1

zx_
zx_

Reputation: 41

The working format after Google changed the URL format. You need to get the image URL by getting the link after setting 'Anyone with the link' option.

![Example Image](https://drive.google.com/uc?id=1A1cNS98neP17g3jkpcbDGlrRik1QNNbm)

You need to provide the image id you're trying to embed as in the template format below.

![Example Image](https://drive.google.com/uc?id=<YOUR_IMAGE_ID>)

Upvotes: 1

user0221441
user0221441

Reputation: 346

How to insert an Image in a github-flavoured markdown format and be able to adjust its size

  1. Upload the image image.jpg to your Google Drive
  2. Click the get link button at the top right corner

Get Link

  1. Change the permission type to Anyone with the link

enter image description here

  1. Copy (to clipboard) only the file ID <FILEID> from the full link as shown (highlighted in blue) and click Done. At the time of writing the shareable link takes the form:

https://drive.google.com/file/d/``/view?usp=sharing

enter image description here

  1. 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

Upvotes: 10

Echan
Echan

Reputation: 1415

For example, I have a.jpg on the google drive.

  1. Right click the image and click Share...

  2. Click Advanced and change the Who can access option to Public on the web - Anyone on the Internet

  3. Copy the link to share and you will have something like

    https://drive.google.com/file/d/<FILE_ID>/view?usp=sharing

  4. Copy the <FILE_ID> to make a link like this:

    https://drive.google.com/uc?export=view&id=<FILE_ID>

  5. 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.

image

Hope this helps.

Upvotes: 94

Related Questions