如何解决iOS设备上Google App Script无法显示Google Drive图片问题？

问题背景 #

通过Google Apps Script部署的网页，使用https://drive.google.com/uc?export=view&id=[IMG_ID]格式加载已设置「任何有链接的人均可访问」权限的Drive图片，在Android、Mac的Chrome中正常显示，但在iPhone的Chrome和Safari中无法加载。

解决方案 #

1. 替换为Google Drive直接资源链接

iOS浏览器对drive.google.com/uc的重定向处理存在兼容性问题，改用Googleusercontent的直接资源链接可绕过该问题：
将img标签的src替换为：

<img src="https://lh3.googleusercontent.com/d/[IMG_ID]" width="50px" height="auto" alt="img">

该链接是Drive图片的原始资源地址，无需额外重定向，iOS浏览器可直接解析加载。

2. 调整HtmlService输出的缓存策略

iOS浏览器可能缓存了旧的错误响应，可通过设置响应头部强制刷新：
修改Code.gs中的doGet函数：

function doGet(request) {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setCacheTtl(0) // 强制每次请求获取最新内容
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); // 确保跨框架显示正常
}

同时在index.html的<head>中添加缓存控制meta标签：

<head>
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
</head>

3. 确认图片权限设置

再次检查图片共享权限：

• 打开Google Drive中对应图片的共享设置
• 确保权限为「任何有链接的人」，且权限级别为「查看」
• 保存设置后重新测试

验证方案 #

修改后重新部署Google Apps Script项目，在iPhone的Chrome和Safari中访问部署网页，确认图片是否正常加载。

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