在Apps脚本中使用带有HtmlService的base64编码图像 [英] Using base64-encoded images with HtmlService in Apps Script

问题描述

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 Script中，图片不显示。在呈现的页面上的源代码，图像标签显示如下：

 < img src =null> 
  

是否有另一种方法可以将base64编码的图像添加到页面中？我可以将图像作为blob ，但我不认为有一种方法可以直接将一个blob添加到HTML内容中。

href =http://googleappsdeveloper.blogspot.com/2014/12/speeding-up-htmlservice.html =nofollow> 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）; 
  

Does Google Apps Script support the use of base64-encoded images with HTML service? I am trying to add images to an HTML page using base64 encoding, but they are not displaying in the final page.

The HTML I am trying to use is:

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

When I log the html content just before it is rendered by HTML service this appears as:

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

This works fine in JSFiddle and in normal HTML, but in Apps Script, the images do not display. When viewing the source code on the rendered page, the image tags appear as follows:

<img src="null">

Is there another way to add base64-encoded images to the page? I can get the images as a blob, but I don't think there is a way to directly add a blob to the HTML content.

解决方案

As of December 2014, Google Apps Script has added an additional IFRAME sandbox mode, which supports data URIs (since it does not use the Caja compiler). The downside is that IFRAME mode is not compatible with older browsers, but depending on your requirements that may not be an issue.

All that's required is to call setSandboxMode() on your template, and your data URIs should work as expected:

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

output.setSandboxMode(HtmlService.SandboxMode.IFRAME);

这篇关于在Apps脚本中使用带有HtmlService的base64编码图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！