如何在Google Sheets驱动的WebApp HTML表格中显示单元格图片？

问题描述 #

我在基于Google Sheets数据构建的WebApp的HTML表格中显示图片时遇到了问题。此前我的帖子被标记为重复，但我需要不同的解决方案。

我的Google Sheets数据中，webapp!B1:B单元格通过公式根据每日天气预报插入图片（天气数据来自Visual Crossing），公式逻辑大致为：

如果今日预报为"sunny"，选择Icons!A1单元格中的图片；如果是"partly cloud"，选择Icons!A2单元格中的图片，以此类推

待显示的图片是Icons!A1:A中的单元格内图片。WebApp运行后，图片无法显示，取而代之的是"CellImage"文本。

当前代码 #

Code.gs #

function doGet() {
  return HtmlService
      .createTemplateFromFile('index')
      .evaluate();
}

function getSheetData()  { 
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName('webapp'); 
  var dataRange = dataSheet.getDataRange();
  var dataValues = dataRange.getValues();  
  return dataValues;
}

HTML #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link
      rel="stylesheet"
      href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"
      />
      <style>
      .container {
        padding: 35px 7px 0px 7px;
         }
         
      .all-tables {
        font-size:16px;
        background-color: #EFEFEF;
        border: 1px solid #EFEFEF;
        border-radius: 5px;
        width: 310px;
      }
      
      th, td {
        text-align: left;
        padding-left: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
      }
      </style>
  </head>
  <body class="container">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
  <style>
  body {
    font-family: "Poppins", serif;
  }
</style>
  </head>
  <body>
    <table class="all-tables">
    <?var tableData = getSheetData();?>
    <?for(var i = 0; i < tableData.length; i++) { ?>
      <?if(i == 0) { ?>
        <tr>
        <?for(var j = 0; j < tableData[i].length; j++) { ?>
        <th><?= tableData[i][j] ?></th>
        <? } ?>
        </tr>
      <? } else { ?>
        <tr>
        <?for(var j = 0; j < tableData[i].length; j++) { ?>
        <td><?= tableData[i][j] ?></td>
        <? } ?>
        </tr>
      <? } ?>
    <? } ?>
    </table>
  </body>
</html>

已尝试的方法 #

• 将getValues()替换为getDisplayValues()，无效
• 修改webapp!B1:B的单元格格式，无效
• 将图片托管到外部站点，用IMAGE()公式导入，WebApp仅显示URL，无法渲染图片
• 直接使用图片URL，同样仅显示文本URL

需求 #

希望保留用公式控制图片选择的逻辑，不需要在脚本中编写天气匹配的判断，寻求能让WebApp正确渲染单元格内图片的方案。

解决方案 #

核心问题是getValues()获取单元格内图片时返回的是CellImage对象而非可直接渲染的内容，我们可以修改getSheetData()函数提取图片URL，再在HTML中渲染为<img>标签，完全保留你的公式逻辑。

修改后的Code.gs #

function doGet() {
  return HtmlService
      .createTemplateFromFile('index')
      .evaluate();
}

function getSheetData()  { 
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName('webapp'); 
  var dataRange = dataSheet.getDataRange();
  var dataValues = dataRange.getValues();  

  // 遍历数据，提取CellImage对象的URL
  for (var i = 0; i < dataValues.length; i++) {
    for (var j = 0; j < dataValues[i].length; j++) {
      var cellValue = dataValues[i][j];
      // 判断是否为CellImage对象
      if (cellValue && typeof cellValue.getUrl === 'function') {
        dataValues[i][j] = cellValue.getUrl();
      }
    }
  }
  
  return dataValues;
}

修改后的HTML模板 #

在渲染单元格内容时，自动识别图片URL并渲染为图片：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link
      rel="stylesheet"
      href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"
      />
      <style>
      .container {
        padding: 35px 7px 0px 7px;
         }
         
      .all-tables {
        font-size:16px;
        background-color: #EFEFEF;
        border: 1px solid #EFEFEF;
        border-radius: 5px;
        width: 310px;
      }
      
      th, td {
        text-align: left;
        padding-left: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
      }
      .weather-icon {
        width: 40px; /* 根据需求调整图片大小 */
        height: 40px;
      }
      </style>
  </head>
  <body class="container">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
  <style>
  body {
    font-family: "Poppins", serif;
  }
</style>
  <body>
    <table class="all-tables">
    <?var tableData = getSheetData();?>
    <?for(var i = 0; i < tableData.length; i++) { ?>
      <?if(i == 0) { ?>
        <tr>
        <?for(var j = 0; j < tableData[i].length; j++) { ?>
        <th><?= tableData[i][j] ?></th>
        <? } ?>
        </tr>
      <? } else { ?>
        <tr>
        <?for(var j = 0; j < tableData[i].length; j++) { ?>
        <td>
          <?// 判断是否为图片URL，通过HTTP开头识别 ?>
          <?if (tableData[i][j] && tableData[i][j].startsWith('http')) { ?>
            <img src="<?= tableData[i][j] ?>" alt="Weather Icon" class="weather-icon">
          <? } else { ?>
            <?= tableData[i][j] ?>
          <? } ?>
        </td>
        <? } ?>
        </tr>
      <? } ?>
    <? } ?>
    </table>
  </body>
</html>

说明 #

1. 脚本中通过cellValue.getUrl()提取单元格内图片的原始URL，这是Google Apps Script中CellImage对象的内置方法
2. HTML中自动识别URL并渲染为图片，非URL内容正常显示文本
3. 完全保留了你用公式控制图片选择的逻辑，无需在脚本中编写天气匹配判断

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