Apps Script - Embedding Google Drive images in HTML pages

Other Questions Google drive
1

I’m working on a project where I need to show images stored in Google Drive on my HTML page through Google Apps Script. I’ve been struggling with this for a while now.

I attempted to use this approach:

<img src="https://drive.google.com/thumbnail?id=file_id_here" alt="My Picture">

But the image doesn’t load properly. The HTML page just shows a broken image icon instead of the actual picture.

Has anyone figured out the correct way to embed Google Drive images into HTML using Apps Script? I’m looking for a reliable method that actually works. Any help would be great!

2

Drive thumbnails are a pain with permissions. Try using getBlob().getDataAsString() in Apps Script, then pass that blob data to your HTML template. Just watch the file size - big files will kill your loading speed. Way better than fighting with sharing settings.

3

I had the same issue before. Google Drive’s sharing settings mess with embedding - the thumbnail URL you’re using needs the right permissions and won’t work in regular HTML.

What worked for me was converting the image to base64 in Apps Script, then embedding it directly. Use DriveApp.getFileById(fileId).getBlob() to grab the file, then convert it with Utilities.base64Encode(). In your HTML, just do src=“data:image/jpeg;base64,” + base64String.

You could also set the Drive file to ‘anyone with the link can view’ and use this direct download link: https://drive.google.com/uc?id=FILE_ID. But that means changing sharing settings, which might not work if your content is sensitive.

4

The thumbnail API works fine - you’re just missing a key step. You need to create a service function in Apps Script that handles auth and serves the image data to your HTML. Don’t try accessing the Drive URL directly from HTML. Instead, make a function in your .gs file that grabs the image blob with DriveApp.getFileById(fileId).getBlob(), then return that data to your HTML template. In your HTML, call this function through google.script.run and handle the response by setting the img src dynamically with JavaScript. This keeps everything server-side where Apps Script has proper Drive access, instead of making the browser authenticate with Drive directly. Here’s the thing - your HTML runs client-side without Drive permissions, but Apps Script runs server-side with full access to your Drive files.