DEV Community

Justin Poehnelt for Google Workspace Developers

Posted on • Originally published at justin.poehnelt.com on

Embed images from Google Drive in your website

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" 
/>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

<iframe src="https://drive.google.com/file/d/18onwpszLRsc62P92f7biat6ORbXtL7u4/preview" style="border: 0"></iframe>
Enter fullscreen mode Exit fullscreen mode

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

<iframe src="https://drive.google.com/file/d/18onwpszLRsc62P92f7biat6ORbXtL7u4/preview" style="border: 0" height="400" width="600"></iframe>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)