Embedding an Image from Google Drive

How to find a direct link to an image on your public Google Drive

Lea Sloan avatar
Written by Lea Sloan
Updated over a week ago

While creating assignment descriptions using CodeHS Create, sometimes you may want to insert an image from your Google Drive. Since 'Sharing' an image from Google Drive does not actually provide a direct link, there are a few more steps involved in finding a direct link that you can embed using Markdown:

Finding the Image ID

To find the ID of an image file:

  1. Navigate to the file on your Google Drive

  2. Click the three dots located in the top right corner of the file

  3. Select Preview from the menu

  4. Click the three dots located in the upper right corner of the page

  5. Select Open in New Window

image is a .gif that explains how to preview an image within a Google Drive folder to find and copy the image ID.

Note: Double-check your Share permissions. General Access should be set to Anyone with the link:

image of setting the general access permissions to 'Anyone with the link'

In this new window's URL, the string of text after drive.google.com/file/d/ and before /view is the ID of the image file.

For example, in the following URL:

https://drive.google.com/file/d/1uEpd4IzXgwCzfxwivCTzbM5_ViMPLjZY/view

This is the image ID:

1uEpd4IzXgwCzfxwivCTzbM5_ViMPLjZY

Image is a screenshot that includes the image and the image's URL. There is a pink box around the Image ID that serves as a highlight.

Insert into Embed Link

Once you have the image file ID, you can create a direct link to the image that can be used in Markdown or HTML.

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

Utilizing the aforementioned image ID example, the final URL would look like this:

https://drive.google.com/uc?export=view&id=1uEpd4IzXgwCzfxwivCTzbM5_ViMPLjZY

Image is a gif that shows the file ID being updated to include the Image ID that was found in a prior example on the page.

⚡️ Using a Chromebook? You can save the image to your Chromebook and upload it directly into CodeHS.


Still have questions? Contact our team at hello@codehs.com to learn more!

Did this answer your question?