Google Sites HTML returning Base64 image encoding as javascript:void(0);

Question

I'm trying to build a program in Google Apps Script which takes data from a google sheet, processes it into a graph using the GAS Charts Service, then places the graph on a Classic Google Sites using the Sites Service.

Using the Charts example code, I compile a graph:

function graphTest () {
 var data = Charts.newDataTable()
      .addColumn(Charts.ColumnType.STRING, 'Month')
      .addColumn(Charts.ColumnType.NUMBER, 'In Store')
      .addColumn(Charts.ColumnType.NUMBER, 'Online')
      .addRow(['January', 10, 1])
      .addRow(['February', 12, 1])
      .addRow(['March', 20, 2])
      .addRow(['April', 25, 3])
      .addRow(['May', 30, 4])
      .build();

  var chart = Charts.newAreaChart()
      .setDataTable(data)
      .setStacked()
      .setRange(0, 40)
      .setTitle('Sales per Month')
      .build();

  var imageData = Utilities.base64Encode(chart.getAs('image/png').getBytes());
  var imageUrl = "data:image/png;base64," + encodeURI(imageData);
  return imageUrl;
}

Then I place the graph on a new Google Sites Page using a simple HTML Template:

var pageTemplate = HtmlService.createTemplateFromFile("page template.html");
pageTemplate.image = graphTest();
var currentPage = site.createWebPage("graph", "graph", pageTemplate.evaluate().getContent())

The page template contains a line for the image:

<img src = <?!=image?>>

This code would, in theory, work fine, but upon looking at the output in Sites, the page HTML is just a cryptic

<img src="javascript:void(0);">

Running the code in a basic HTML compiler works absolutely fine, so that leads me to believe that there isn't an issue with the Base64 encoding itself. It seems to just be incompatible with Old Google Sites. Indeed, directly writing the HTML code into the page, like

<img src="data:image/png;base64, *all the Base64 data here* ">

gives the same javascript:void(0); as the GAS code.

Does Old Google Sites not accept Base64 encoding for images? Is there an alternate way I could get the graph image onto a google sites via Google Apps Script?

Thanks,

Alex

Not an answer, but you should use encodeURIComponent for everything except full URLs. — Heretic Monkey
I would expect the page output to have <img border='1' ....> since that is what is getting added by htmlOutput.append. If you're seeing no border on your image tag, I'd guess you're not seeing the output from that portion of the code. — James
@James The htmlOutput created in graphTest() is separate from the template I ended up using in the actual page itself, It's a remnant from the code I copy-pasted from the Charts Service page. A bit of a confusing oversight by me, I might go back and delete those couple of lines. — Alex Appleby

Alex Appleby Alex Appleby · Accepted Answer · 2019-03-14T02:41:02

To answer my own question:

After quite a lot of experimentation, I was able to use the

<embed src = "*Base64 Data*">

tag in lieu of the img tag with success. This worked both through Google Apps Script and via the Google Sites HTML editor.

Google Sites HTML returning Base64 image encoding as javascript:void(0);

1 Answers