Google Apps Script嵌入Google Sites时添加图形资源的最佳方案

我之前在搭建嵌入Google Sites的Apps Script网站时，也碰到过这个资源托管的难题——毕竟不像常规托管有专门的文件目录，谷歌生态内确实得换个思路。下面几个都是我亲测有效的方案，全用谷歌自家服务，完全不用第三方托管：

方案1：Google Drive生成可直接访问的图片链接 #

这是最省心的方案，步骤也简单：

• 把图片上传到Google Drive，右键点击文件→共享→更改，设置为「知道链接的任何人都能查看」，权限选「查看者」
• 复制文件的共享链接（比如https://drive.google.com/file/d/FILE_ID/view?usp=sharing），提取里面的FILE_ID部分
• 构造直链：https://drive.google.com/uc?id=FILE_ID，这个链接可以直接放到CSS的background-image里，比如：

.your-element {
  background-image: url('https://drive.google.com/uc?id=123abcXYZ...');
}

优缺点：操作简单，不用写额外代码；但如果后续修改了Drive文件的共享权限，链接会失效，而且Drive有一定的带宽限制（个人版一般够用）。

方案2：将图片转成Base64直接嵌入CSS #

如果不想依赖外部链接，把图片编码成Base64是个不错的选择，相当于把图片内容直接写进CSS里：

• 用本地工具把图片转成Base64编码：
  • Mac/Linux终端：base64 /path/to/your/image.png
  • Windows PowerShell：[convert]::ToBase64String((Get-Content -path "C:\path\to\image.png" -Encoding Byte))
• 把生成的编码放到CSS里，格式要对应图片类型（png用image/png，jpg用image/jpeg）：

.your-element {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==');
}

优缺点：完全不需要外部依赖，加载更快（不用额外请求）；但如果图片较大，会让CSS文件变得臃肿，不利于维护。适合小图标、背景纹理这类小尺寸图片。

方案3：用Google Apps Script Web App托管图片 #

如果需要更可控的权限或动态处理图片，可以自己搭个简单的图片托管服务：

• 在你的Apps Script项目里新建一个脚本文件（比如ImageHost.gs），写入以下代码：

function doGet(e) {
  // 通过URL参数id获取Drive里的文件ID
  const fileId = e.parameter.id;
  if (!fileId) return ContentService.createTextOutput("Missing file ID").setMimeType(ContentService.MimeType.TEXT);
  
  try {
    const file = DriveApp.getFileById(fileId);
    const blob = file.getBlob();
    // 返回图片内容并设置正确的MIME类型
    return ContentService.createTextOutput(blob.getDataAsString())
      .setMimeType(blob.getContentType());
  } catch (err) {
    return ContentService.createTextOutput("File not found").setMimeType(ContentService.MimeType.TEXT);
  }
}

• 部署为Web App：点击顶部的「部署」→「新部署」→选择「Web应用」，执行权限选「我」，访问权限选「任何人，甚至匿名用户」，点击部署后复制Web App的URL
• 使用时，把Web App URL和Drive文件ID拼接起来：https://script.google.com/macros/s/WEB_APP_DEPLOYMENT_ID/exec?id=FILE_ID，放到CSS里即可
  优缺点：权限可控（可以修改代码限制访问），还能扩展添加缓存、压缩等功能；但需要写额外的脚本，部署时要注意版本管理。

方案4：利用Google Sites的内置图片存储（可选） #

如果你已经把Apps Script网站嵌入到Google Sites里，也可以把图片直接上传到Google Sites的页面中，然后右键点击图片→复制图片地址，把这个URL用到CSS里。不过这个方法的稳定性稍差，Google Sites的图片URL可能会在后台变更，所以只适合临时或不重要的图片。

根据你的需求选就行——小图用Base64，中等图用Drive直链，需要控制权限就用Web App，亲测都能正常在Google Sites里生效！

内容的提问来源于stack exchange，提问作者user2048695