Recently the ability to embed Google Drive images with the /uc path started failing. For example, the following <img> would have worked in the past with the export view link:

<!-- DOES NOT WORK: 403 Forbidden -->
<img 
  src="https://drive.google.com/uc?export=view&id=1234567890abcdef" 
/>

However this no longer works and a 403 error is returned. Partly this is because of the discontinuation of third party cookies. You can read more at this blog post, Upcoming Changes to Third Party Cookies in Google Drive.

The suggestion is to do the following to embed a Google Drive image:

For other files, once opened in Drive, select “Open in new window” from the overflow menu, and then open the overflow menu and select “Embed item…”, which provides the iframe HTML tag.

This generates an iframe with the following HTML:

<iframe 
  src="https://drive.google.com/file/d/1234567890abcdef/preview"
></iframe>

Examples embedding images from Google Drive

This can be added to a website, but it’s not ideal. The iframe has a background color and the image is not responsive.

Here the border has been removed with style="border: 0" and no height or width has been set.

Here the border has been removed with style="border: 0" and the height and width have been set to match the image dimensions.

Limitations

• The iframe has a background color
• The image in the iframe is not responsive
• Other elements such as zoom controls over the image
• No ability to add alt text
• Click handlers will be messy
• Requires knowing the size of the image and not just the Drive file id

Long term fix

• I would move the files to a different host optimized for serving public images behind a CDN.

Related

• Drive File Get Blob and Scopes in Google Apps Script
• Google Drive Picker TypeScript - Types Updated
• Google Apps Script: google.script.run vs. doGet/doPost Endpoints
• Using Vertex AI in Apps Script
• Google Cloud Region Latency in Google Apps Script
• How to Set Google Meet Access Settings for a Calendar Event
• Google Next 24 - Rust, Python, and WASM in Apps Script
• Google Forms - title vs name vs documentTitle
• Google Sheets API - IMPORT / Image - Bypass User Consent
• Promises, async and await in Google Apps Script

Next

Google Calendar - Usage Limits Exceeded

Previous

Apps Script Service Account Impersonation

About the author

Justin Poehnelt

I am a Developer Relations Engineer at Google and current or past member of teams such as Google Maps and Google Workspace. See more related work below or at #code and #google. I also syndicate this content to dev.to/jpoehnelt.

Get the RSS feeds: All, Run, Code.