Google Drive共享图片及favicon在Apps Script部署的HTML页面停止加载问题

故障原因 #

本次突发失效是Google Drive近期调整公开资源嵌入式访问策略导致，原有https://drive.google.com/uc?export=view&id=格式的直链不再支持在外部站点直接嵌入使用。

排查与修复步骤 #

• 第一步确认资源权限
  检查两张图片的共享权限必须设置为「知道链接的所有人均可查看」，同时确认图片所在的共享文件夹权限没有被收紧，文件夹权限修改会同步影响内部文件的公开访问权限。
• 第二步替换图片链接格式
  将原有Google Drive直链替换为新的通用嵌入格式：
  https://lh3.googleusercontent.com/d/[你的文件ID]
  可在文件ID后追加=w[数值]-h[数值]自定义图片展示尺寸，不需要指定尺寸可省略。

代码修改示例 #

Apps Script favicon配置修改

原有代码：

function doGet(e) {
  return htmlServ.evaluate()
    .setFaviconUrl('https://drive.google.com/uc?export=view&id=1LZQhGlUfb92QD6Ruh9d6W5fsrrMMumG9#.png')
    .setTitle('CLR: PACKING')
    .addMetaTag("viewport", "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0")
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

修改后代码：

function doGet(e) {
  return htmlServ.evaluate()
    .setFaviconUrl('https://lh3.googleusercontent.com/d/1LZQhGlUfb92QD6Ruh9d6W5fsrrMMumG9')
    .setTitle('CLR: PACKING')
    .addMetaTag("viewport", "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0")
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

HTML页面图片配置修改

原有代码：

<!doctype html>
<html lang="en">

<head>
  <title>CLR: PACKING</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>

<body>
  <div class="conteiner">
    <form novalidate id="my-form">
      <h6 class="title">PACKING</h6>
      <img src="https://drive.google.com/uc?export=view&id=1L_zI3yyds5Dip72CnTa7C0qDT_KKu6J_" class="img-fluid" alt="...">
    </form>
  </div>
</body>
</html>

修改后代码：

<!doctype html>
<html lang="en">

<head>
  <title>CLR: PACKING</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>

<body>
  <div class="conteiner">
    <form novalidate id="my-form">
      <h6 class="title">PACKING</h6>
      <img src="https://lh3.googleusercontent.com/d/1L_zI3yyds5Dip72CnTa7C0qDT_KKu6J_" class="img-fluid" alt="...">
    </form>
  </div>
</body>
</html>

• 第三步验证生效
  修改完成后重新部署Apps Script web应用，选择「新建版本」部署，不要沿用旧版本缓存。用浏览器无痕模式访问测试，排除本地缓存、Google账号登录状态对资源访问的干扰。

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