javascript - 在 Apps 脚本中将 base64 编码图像与 HtmlService 结合使用

标签 javascript html image google-apps-script google-api

Google Apps 脚本是否支持将 base64 编码图像用于 HTML 服务?我正在尝试使用 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,但我认为没有办法直接将 blob 添加到 HTML 内容。

最佳答案

首先从 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

HTML

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

关于javascript - 在 Apps 脚本中将 base64 编码图像与 HtmlService 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20656803/

相关文章:

javascript - 将 mysql 脚本转换为 sqlite 脚本

javascript - 在 ajax 调用中传递 php 值

javascript - 将 JSON 转换为数组

python - 如何更改 2D 图像的 y 轴?

javascript - 使用 JavaScript 将图像添加到 HTML 文档

amazon-web-services - 如何根据 kubernetes 集群位置更改网站内容?

javascript - 单击按钮和页面加载时隐藏元素

javascript - Angular 绝对路线和路线/stateProvider

javascript - AMP 如何在页面中包含 javascript 并应用此脚本中的函数

html - 如何通过css只选择div内的元素