如何在谷歌应用脚本中使用 <img src>答案

【问题标题】：How to use <img src > in google apps script如何在谷歌应用脚本中使用 <img src>
【发布时间】：2017-05-08 09:16:11
【问题描述】：

我想使用 src 属性在谷歌应用程序脚本中显示图像。我把文件夹ID和路径。但是图像无法显示。我在这里共享文件夹。

感谢您的帮助！

https://drive.google.com/drive/folders/0ByNw-B9nXMcbMkxHTGt2X2xUTzQ

function doGet() {
  var html = HtmlService.createTemplateFromFile('index').evaluate()
    .setTitle('picture').setSandboxMode(HtmlService.SandboxMode.NATIVE);
  return html;
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <p> Dispaly picture </p>
    <p><img src="https://drive.google.com/drive/folders/0ByNw-B9nXMcbMkxHTGt2X2xUTzQ/200w.gif"> </p>
  </body>
</html>

【问题讨论】：

SandboxMode.IFRAM 现在是唯一的支持模式。 NATIVE 和 emulated 模式都已折旧两年。

标签： html google-apps-script

【解决方案1】：

img src="" 需要您要显示的实际图像的 URL，而不是包含它的文件夹。要获得正确的链接，您需要在其自己的窗口中打开图片或单击共享并以这种方式获取链接。

图片的正确链接是：

https://drive.google.com/file/d/0ByNw-B9nXMcbSTN2S2ZiYWprdzA/view

要在 src 中使用它，您需要将 fileID 添加到此格式 URL 的末尾：

https://drive.google.com/uc?export=download&id=

这样就变成了：

https://drive.google.com/uc?export=download&id=0ByNw-B9nXMcbSTN2S2ZiYWprdzA

注意：驱动器文件必须与“知道链接的任何人”共享，其他用户才能查看文件或在 G Suite 之外使用。

【讨论】：

完美解决方案。谢谢！
在使用常规 Google 帐户部署 Web 应用程序时，这对我不有用。在我公司的 GSuite 中从我的 google 帐户部署网络应用程序时，它确实工作。

【解决方案2】：

出于某种原因，James Donnellan 接受的答案对我不起作用。当我发布页面时，我可以看到图像，但其他人看不到。我检查了共享设置，并尝试使用“以我身份执行”选项进行发布。也尝试使用给定的链接，结果相同。

虽然上面提到的方法使用起来要简单得多，但我想分享一下对我有用的方法，以防其他人遇到同样的问题。我使用将图像转换为字节：

在应用脚本中：

function loadImageBytes(){
var id = "your_drive_file_id"
var bytes = DriveApp.getFileById(id).getBlob().getBytes();
return Utilities.base64Encode(bytes);
}

在 Javascript 中

google.script.run
.withSuccessHandler( function(bytes){ showImage(bytes) })
.loadImageBytes();

function showImage(bytes){
document.getElementById("ItemPreview").src = "data:image/png;base64," + bytes; 
}

希望这对任何人都有帮助。

【讨论】：

这对我有用，非常感谢！尽管在添加此解决方法之前，我什至无法看到我请求的图像。您是否知道为什么简单地从共享文件夹中使用 src="sharable_link" 引用图像并不能解决问题？希望你可能会从八月以来一直在逃避我。
对我来说，使用常规谷歌帐户部署应用程序时，另一个答案也不起作用。从我公司的 gsuite 帐户部署时，它确实有效。