在使用 HTML 服务创建的面板中显示来自数据的 IMG

Displaying IMG from data in panel created with HTML Services

我有一个侧面板,它的代码从服务器获取数据 uri 图像(具体来自 Google 文档,使用 google.script.run)。

我需要显示它,我正尝试在 HTML 文档中的 IMG 标签上这样做,但沙箱禁止将任何内容分配给 img.src。

有什么想法,而不是使用模板?因为我想动态改变图像。

谢谢

如果您使用 inHtmlService.SandboxMode.IFRAME 模式,您可以将 base64 传递给图像 src。下面是使用模板执行此操作的示例。

code.gs

function doGet() {
   var t = HtmlService.createTemplateFromFile('index');
   t.icon = icon;
   return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

index.html

<div>
 <img src="data:image/png;base64,<?=icon?>"/>
</div>

icons.gs

var icon = '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';