求助：Google表格HTML侧边栏点击按钮无法插入图片问题

问题原因 #

1. Apps Script的imageAdder函数未接收HTML传递的图片URL参数，导致变量未定义报错
2. HTML中调用了未定义的getints()和getpaytype()函数，引发JS错误中断执行
3. 原代码未处理执行异常，无法反馈操作结果

修正后的完整代码 #

1. Google Apps Script代码（Code.gs） #

function imagemenu() { 
  var form = HtmlService.createHtmlOutputFromFile('Images').setTitle('添加图片');
  SpreadsheetApp.getUi().showSidebar(form);
}

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('工具')
      .addItem('插入图片', 'imagemenu')
      .addToUi();     
}

// 接收图片URL参数，插入到指定单元格位置
function imageAdder(imgUrl) {
  try {
    const sh = SpreadsheetApp.getActiveSheet();
    const response = UrlFetchApp.fetch(imgUrl);
    const blob = response.getBlob().setName('插入的图片');
    // 插入到第15列、第58行（可按需修改行列号）
    sh.insertImage(blob, 15, 58);
    return '图片插入成功！';
  } catch (e) {
    return '插入失败：' + e.message;
  }
};

2. HTML代码（Images.html） #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" />
    <style>
      .narrow {
        margin-bottom: 0.5rem;
      }
      .btn-container {
        padding: 10px;
      }
    </style>
    <script>
      // 插入越野图片的函数
      function insertCrossCountryImage() {
        const displayArea = document.getElementById("displayReturn");
        displayArea.innerHTML = '正在插入图片...';
        
        const imgUrl = 'https://thevasilcompany.com/wp-content/uploads/2024/10/VJ-CC.png';
        
        google.script.run
          .withSuccessHandler((message) => displayArea.innerHTML = message)
          .withFailureHandler((error) => displayArea.innerHTML = '出错：' + error.message)
          .imageAdder(imgUrl);
      }

      // 模板：复制此函数添加更多图片选项
      function insertAnotherImage() {
        const displayArea = document.getElementById("displayReturn");
        displayArea.innerHTML = '正在插入图片...';
        
        const imgUrl = '替换为你的图片URL';
        
        google.script.run
          .withSuccessHandler((message) => displayArea.innerHTML = message)
          .withFailureHandler((error) => displayArea.innerHTML = '出错：' + error.message)
          .imageAdder(imgUrl);
      }
    </script>
  </head>
  <body>
    <div class="btn-container">
      <div class="form-row">
        <div class="form-group col-md-12 narrow">
          <input type="button" value="越野图片" onclick="insertCrossCountryImage()" class="btn btn-primary btn-block" />
        </div>
      </div>
      <!-- 模板：复制此按钮块添加更多图片选项 -->
      <div class="form-row">
        <div class="form-group col-md-12 narrow">
          <input type="button" value="其他图片" onclick="insertAnotherImage()" class="btn btn-secondary btn-block" />
        </div>
      </div>
    </div>
    <div id="displayReturn" style="padding: 10px; color: #666;"></div>
  </body>
</html>

核心修改点 #

• 参数传递修复：给imageAdder添加imgUrl参数，接收HTML传递的图片地址，解决变量未定义问题
• 错误处理增强：GS函数添加try-catch捕获异常，HTML添加失败回调，便于排查问题
• 无效代码清理：删除HTML中未定义的函数调用，避免JS报错中断执行
• 模板化设计：提供可复用的按钮和函数模板，复制后替换图片URL即可快速添加新功能
• 反馈优化：添加加载提示和操作结果反馈，提升使用体验

使用说明 #

1. 替换Code.gs和Images.html中的原有代码
2. 保存后刷新表格，点击顶部「工具」菜单的「插入图片」打开侧边栏
3. 点击按钮插入对应图片；如需添加更多图片，复制按钮块和JS函数模板，替换图片URL即可

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