AppsScript- Using An Image From Google Drive In HtmlService

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 displayed (due to the use o

Solution 1:

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

Solution 2:

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.

Solution 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?>" >
<? }) ?>

Solution 4:

When you access a file using the Advanced Drive Service, the metadata has an attribute called "thumbnailLink", which works well for displaying images in the Html Service, particularly if it is a file you do not want to share publicly. It is also much quicker than the base64 method. The link expires within hours, so you'll need to do a fresh request each time.

For a single image, the following will do the trick:

Drive.Files.get(id).thumbnailLink

For several images, you can use the list method in the Advanced Drive Service. For example, the following will access all images in a folder at the given id.

  var query =  "'"+id+"' in parents and mimeType contains 'image/'"
  var files;
  var pageToken;
    do {
      files = Drive.Files.list({
        q: query,
        maxResults: 300,
        pageToken: pageToken
      });
      if (files.items && files.items.length > 0) {
        for (var i = 0; i < files.items.length; i++) {
          var file = files.items[i];
          var title = file.title
          var src = file.thumbnailLink
        }
        
      }
      pageToken = files.nextPageToken;
    } while (pageToken);

You can also adjust the size of the image by replacing the "s220" string with a larger number, e.g., src = src.replace("s220","s1000").