AppsScript- Using an image from Google Drive in HtmlService

Question

The Images section of the following document

https://developers.google.com/apps-script/html_service

says that only images hosted on a public url can be displaye

Answer 1

It sounds like you're trying to offer some sort of permalink from Google Drive that is publicly accessible.

• Open the File.

• Under the File Menu, Click Sharing.

• Under "Who has access", click Change.

• Select "Public on the web".

• Click done, and copy the link listed. That is your publicly available link which should work for you.

Answer 2

There is not yet a way to do what you are asking.

Answer 3

You can embed your images using base 64 encoding.

function getFileBase64s(fileName) {
  var output = [];
  if (typeof fileName === 'string'){
    var fileIterator = DriveApp.getFilesByName(fileName);
    while (fileIterator.hasNext()) output.push(Utilities.base64Encode(fileIterator.next().getBlob().getBytes()));
  } else {
    SpreadsheetApp.getUi().alert('File name: '+fileName+' is not an string')
  };
  return output;
};

In your HTML template:

<? getFileBase64s('fileName').forEach(function(fileBase64){ ?>
    <img src="data:image/png;base64,<?=fileBase64?>" >
<? }) ?>