如何通过sheetrock.js在HTML输出中获取Google Sheets中的图片？

Sheetrock默认不会自动将Google Sheets中的图片链接转换为HTML图片元素，需要在callback函数里手动处理返回的数据，把图片链接替换成<img>标签后再渲染表格。

修改后的完整代码 #

<script>
    var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/SHEET_ID/edit#gid=0';
    var sheetrockResultsList = Handlebars.compile($('#compileMe').html());

    $('#resultsList').sheetrock({
        url: mySpreadsheet,
        query: 'select A,B,C,D,E',
        callback: makeTable,       
    });

    function makeTable(error, options, response) {
        // 处理返回数据：将指定列的图片链接转为img标签
        // 假设图片链接在E列（列索引从0开始，A=0、B=1...E=4）
        const imageColumnIndex = 4;
        response.rows.forEach(row => {
            const imageUrl = row.cellsArray[imageColumnIndex];
            // 若存在有效链接，替换为带样式的img标签
            if (imageUrl) {
                row.cellsArray[imageColumnIndex] = `<img src="${imageUrl}" alt="表格图片" style="width:80px; height:auto;">`;
            }
        });

        // 处理完数据后初始化DataTable
        $(options.user.target).DataTable({
            pageLength: 30,
            lengthChange: false,
            searching: true,
            paging: false,
            scrollY: "60vh", 
            scrollCollapse: true,
            scrollX: false, // 修正原代码拼写错误sscrollX
            ordering: false,
            language: {
                processing: "Loading...",
                search: "",
                info: "",
                infoEmpty: "No results",
                infoFiltered: ""
            }
        });
    }
</script>

关键注意点 #

• 调整列索引：根据你实际存储图片链接的列，修改imageColumnIndex的值（比如图片在B列就设为1）。
• 图片存储要求：Google Sheets里的图片必须是「嵌入单元格」或直接填写的图片URL，浮动在单元格上方的图片Sheetrock无法抓取。
• 样式自定义：可以修改<img>标签的style属性，调整图片尺寸、边距等适配表格布局。

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