如何在Apps Script托管的HTML页面中显示谷歌表格中的图片？

要在用户记录里展示上传的照片，只需要在HTML页面中添加<img>标签，再把表格Q列（对应代码里的records[0][16]）的URL赋值给这个标签的src属性即可，具体操作步骤如下：

1. 在HTML页面添加图片显示元素 #

打开你的DataTable.html，在表单合适位置（比如photoLink输入框的下方）添加一个带ID的<img>标签，用于展示照片：

<!-- 示例：放在photoLink输入框下方 -->
<img id="userPhoto" alt="用户上传照片" style="max-width: 300px; max-height: 300px;" />

这里设置的max-width和max-height是为了避免图片过大撑乱页面布局，你可以根据需求调整数值。

2. 更新populateForm函数加载图片URL #

修改现有的populateForm函数，在获取照片URL后，将其赋值给<img>标签的src属性：

function populateForm(records){
    document.getElementById('responseID').value = records[0][0];
    document.getElementById('permitNumber').value = records[0][1];
    document.getElementById('photoLink').value = records[0][16];
    
    // 新增：设置图片显示逻辑
    const photoUrl = records[0][16];
    const photoElement = document.getElementById('userPhoto');
    
    if (photoUrl) {
        photoElement.src = photoUrl;
        photoElement.style.display = 'block'; // 有URL时显示图片
    } else {
        photoElement.style.display = 'none'; // 无URL时隐藏图片占位
    }
}

3. 注意图片URL的访问权限 #

如果照片存储在Google Drive中，默认的分享链接无法直接在网页显示，需要做两处调整：

• 链接格式转换：把原链接中的/file/d/替换为/uc?export=view&id=，比如原链接https://drive.google.com/file/d/123xyz/view改为https://drive.google.com/uc?export=view&id=123xyz
• 文件权限设置：将照片文件的分享权限改为「知道链接的任何人可查看」，否则网页无法加载图片

你的Code.gs中getFormValues函数已经正确获取了photoLink值，只要后续将该值正确传入前端的records数组（对应索引16），上述代码即可正常运行。

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