Serving images in an Apps Script through HtmlService

Question

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!

Answer 1

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