在Apps脚本中使用带有HtmlService的base64编码图像

Question

Google Apps脚本是否支持使用HTML服务使用base64编码的图像？我正在尝试使用base64编码将图像添加到HTML页面,但它们不会显示在最终页面中.

我试图使用的HTML是:

<img src="data:'+contentType+';base64,'+encoded+'"/>

当我在HTML服务呈现之前记录html内容时,它显示为:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUh.....(base64 string)/>

这在JSFiddle和普通HTML中工作正常,但在Apps脚本中,图像不显示.在呈现的页面上查看源代码时,图像标记显示如下:

<img src="null">

有没有其他方法可以将base64编码的图像添加到页面？我可以将图像作为blob获取,但我认为没有办法直接将HTML添加到HTML内容中.

Answer 1

要首先从 Google Drive 文件中获取编码的 Base64 字符串：

GS

var response = UrlFetchApp.fetch('https://googledrive.com/host/fileId/name.png');
var blob = response.getBlob();
var bytes = blob.getBytes();
var base64String = Utilities.base64Encode(bytes);
Logger.log(base64String);
// now copy and paste into html

超文本标记语言

<img src="data:image/png;base64, <base64String>" alt="img name" />

Answer 2

截至2014 年 12 月，Google Apps 脚本添加了额外的IFRAME沙箱模式，该模式支持数据 URI（因为它不使用 Caja 编译器）。缺点是该IFRAME模式与旧版浏览器不兼容，但根据您的要求，这可能不是问题。

所需要做的就是调用setSandboxMode()您的模板，并且您的数据 URI 应该按预期工作：

var output = HtmlService.createHtmlOutput(
  '<img src="data:' + contentType + ';base64,' + encoded + '"/>'
);

output.setSandboxMode(HtmlService.SandboxMode.IFRAME);