Serving images in an Apps Script through HtmlService

1
votes

Can anyone help me determine the best way to host and serve an image using GAS's HtmlService? I'm writing an app that needs a basic HTML UI with two small images, and I'm trying to keep everything as encapsulated as possible.

When I was prototyping on my local machine, I inserted the images inline as base64 encoded strings, but it looks like Caja does't support that.

I found this post about hosting images on Google Drive, which would work for my purposes, but apparently Drive recently deprecated that method:

AppsScript- Using an image from Google Drive in HtmlService

I don't see any obvious way of doing this given the documentation, but I'd strongly prefer not to resort to hosting images on an external service.

https://developers.google.com/apps-script/reference/html/

Thanks for your insight!

1
javascripthtmlimagegoogle-apps-script
Are you sure the drive.google.com/uc?export=view&id=<FILE_ID>; method is deprecated? Have you a source for this? It actually looks more like it was only relatively recent and appears to still be going strong. - HDCerberus
I found a new things suggesting that it was deprecated since switching to the new Drive interface (Source 1, Source 2), but it appears to be working for me now using the instructions @Sandy posted. - John

1 Answers

3
votes

Note that this way of displaying images uses drive hosting which will be discontinued August 31, 2016.

Apps Developer Blog

You can save images to your Google drive, then use the <img> tag, and refer to the image in the source attribute:

For example:

<img src="https://googledrive.com/host/0B12wKjuEcjeiySkhPUTBsbW5j387M/my_image.png" height="95%" width="95%">

Note that you need to use:

"https://googledrive.com/host/[doc id]

where [doc id] is replaced by the document ID

Google Documentation Link - Hosting