How to insert image from Google Drive to Web Apps of Google Apps Scripts

Date: 7 june, 2024

Many of you probably use Google Drive to store image files for displaying on your websites.
Typically, we use a URL like this to reference those images:

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

However, Google no longer supports accessing files this way.
After much research, I’ve discovered that using the thumbnail URL instead works:

https://drive.google.com/thumbnail?id=FILE_ID&sz=s4000

Where “sz” represents the size, with a maximum value of 4000.

To demonstrate, I’ll insert an image from Google Drive into a Google Apps Script web app.
I’ll show you three methods:
Using the old, no-longer-functional format.
Using the new format directly within an HTML file.
Using the new format within a “.gs” file, then calling it from the HTML file.

Let’s see the results.
Here’s my HTML file code, and here’s my “code.gs”.
You can pause the video to examine the code in each section.

Next, I’ll make a small text change to demonstrate that this code actually works. I’ll then click “Save”.

If you can’t find the deployment URL, click here.

If you haven’t deployed your app as a web app yet, you won’t see the URL.
You’ll need to deploy it first, like this.

Okay, now that we have the web app URL, I’ll make another small text change.
This will show you that our web app updates immediately after saving.

That concludes my video!
If you enjoyed it, please subscribe to my channel. Thank you!