在使用 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 = 'iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAZOSURBVFhHzZh5bFRFHMe/b+/tHrQUBFYwlAoYqFQioCBVQsUSEYiQoIKYIrEEECQkTYQECVGBQGMjCVCpCVZpCKCVRP8gXDElxoRQjlZBgV6AW46edLe7b4/3/M3s1Lbsvu0hbfxkZ9+b35vjO7/9zbyZlWZ/7lHxP0QnrtqQbFXlX8LQR6g+b4I3031b8YXpTDAl2mBy2KGz2AFJHxHZC3hxvRn6BDvMThsMdhvZJPaEP9dCWxiJUpt+x4kPJZTtGou6s5thNYZhsNmpSSnSoc5IWs2QDFaeoLdQnuq1D4DasNLApMYLqDr6Ns59nICrX6TSQJm4SDdaaMaYzmhD86X9uHB4jbBESJv9AVKWHOAj8t2tgv/hfahyE/yyDIcjCSGDA/ah42AYbId8pxoVX8+C+86tSGXCSM7KzFche9vY8IQ1Gk1heosN1T+txs1fCoSlAyOpCioio4HZAMghkXmEebu9aAtKkFTtRjR/SolG5pODIteV7kQxtEQxAp4H1H434S2uUbDBOB2DRO7xYrZ2H2OawhRFRfLYLJF7vIQU+hnZTxKHmMLYYExWCTVnP4sYYjBixAisWrVK5HrHxb0vwDyIZm8ct0ULo8I6QwLarpbgzrVzwhiNTLOwoKAAp0+fFpaec//vSsg3zkSWGA2ihKnkYmOChIqjOcISm/bRZmZm8vuMjAye7ylXj2+Eyaa9YEcJkySa560NaGxoEJaeUVpaiuLiYpHrnrvV5VB8fkg6vbB0RdfcpqJzeigbUXXxuHisTVNTk7jrYOnSpdwDaWlpwhIf+e5lEmYUua5IpyoCXXzJCsr1f8LjLuOvl1iwzg0GAxYtWiQs0RQWFiInJ344TF7yJZKnrocS8ApLBxJ1oj01/iOBQADjxo1DbW2tsHRl4sLtcM3chHAMYZrr2OPAZDKhpqYG+fn5wtKVcByf9KuwdjZs2ICWlha+9nXGmTgctI7HZECEMZxOJ9xuN7Zt2yYsQFJqJlcg0U4GlNiV3xP9GmNaFBUVITs7G9Pf2Q41HEaQ9goGvUIxKUMf9sD50o6BF7Z48WKUlJRg+MgUuKavg0GibafJgXCwFfrECXCmzERYMQycsPLycqSnp4scsCDfD79qhhKmjKLQxwe15RYUbx30rpkDE2MrVqzoImpWznfwhswItnkQlimFfCSOdhzOFC6KFrb+9VhlZSVfxxTySDsvv/8VLJNyEPR4+WZUC6nwrL+TMLYLV2hmWMBeYWF/kCwKP3wY9SrcpTvR2uimwRlhdyZhy9ZPRb1o1q5di3379okc4BrzLJ5beRKyhZYIX3xRDGnaltYOYbTdpRcS3MXTYBz1KoZm7UfQR25WWSCwXYcNAfd5uK/8iITQbVz/9VCkXifq6urwdGoq2qjeyAmzMGT8HLimrkTYMYy8FKDRUupOFaGzWyT8m8wqTBYrxq+/gYZL30IpzUbyECtsVvIQexb2wuGajAlv7UCihTp4hNzcXLhcLi6Kkf7eEQzJ2Aw/EhFo8VDs0LrQA1GM6OBXQgj6gWeWHcPFE0WoPTQXZpMOEh14dSYbdGYjgtfP4PLZY6IC0NjYiKSkJOTl5QlLhPKD86GjHlQS1N1W+lGihLEGlKAXiRNfp4NpIprr76Hy8Hw0n9uK1ooDaL1yENd+3gwbnaoZebt3Ijk5Gc3NzTzfmQfXz7Po6LUoRszlgrXjexjEjI0UT1WXcaPsJOpvnsLt0l2oKc2Hp552C1Ro8btrkbtpD6+TtvATfmWkZ63mV/Ye7L2kCDGFcRQZQftYzFlzhDIqav/4DXW1lbhXXQFvyz00U8xc+us2nE+N58UNjif5lZGU8qK46zvawthY/R4oY5Zg3s4GTKK9U9qcdXj+jVyMnjiDlzAZaRvefprmMzeCEo59UO4NcYQRLN5InE+x4Qna0A2fuwfJWbswLO1NUaD/iC+M4IGrhugtQd7zUaIZqwQjy0F/0q2wDkhgH2ZXX+mFsE6IP0RUWsXZ64rf821CBJU8zOBP+tZDH6pRb3JbZM2yj34FltBdfm8yD8LgRCe/t4+cAXa+kilJnhb6in12jEevhDHvGNQgWh/cwNRlBRg1/SPojVZMnLcFQycvx5TcKjw1eQHcZT/gtb0qpiz/Bg0V3/O/OsmNopWeAPwDzbZglh6+UyAAAAAASUVORK5CYII=';
我有一个侧面板,它的代码从服务器获取数据 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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';