如何通过商品编码列表在本地HTML文件自动生成商品缩略图列表

针对你需要批量生成商品主图列表的需求，下面提供两个零门槛方案，无需JS基础，只需简单修改模板内容即可：

方案一：直接粘贴编码（适合少量/中等数量商品） #

这是最容易上手的方式，不用处理文件，直接把编码粘贴到HTML模板里：

1. 复制以下代码到记事本：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品主图列表</title>
    <style>
        .product-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            padding: 20px;
        }
        .product-item {
            border: 1px solid #eee;
            padding: 10px;
            text-align: center;
        }
        .product-item img {
            max-width: 100%;
            height: auto;
            margin-bottom: 10px;
        }
        .sku-text {
            font-size: 14px;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>商品主图列表</h1>
    <div class="product-list" id="productList"></div>

    <script>
        // ---------- 仅需修改这两处 ----------
        // 1. 替换为目标网站的图片URL模板，{SKU}会自动替换成商品编码
        const IMAGE_URL_TEMPLATE = "https://你的目标网站域名/images/{SKU}.jpg";
        // 2. 粘贴商品编码，每个编码用引号括起，逗号分隔
        const SKU_LIST = [
            "SKU001",
            "SKU002",
            "SKU003"
            // 继续添加更多编码...
        ];
        // -----------------------------------

        // 以下代码无需修改
        const productList = document.getElementById('productList');
        SKU_LIST.forEach(sku => {
            const imageUrl = IMAGE_URL_TEMPLATE.replace("{SKU}", sku);
            const item = document.createElement('div');
            item.className = 'product-item';
            item.innerHTML = `
                <img src="${imageUrl}" alt="商品${sku}主图" onerror="this.src='https://via.placeholder.com/200?text=图片加载失败'">
                <div class="sku-text">${sku}</div>
            `;
            productList.appendChild(item);
        });
    </script>
</body>
</html>

2. 修改模板中的关键内容：

   • 图片URL模板：找到目标网站任意商品的图片地址，把编码部分替换成{SKU}。比如目标图片地址是https://shop.com/goods/12345/main.jpg，就改成"https://shop.com/goods/{SKU}/main.jpg"
   • 商品编码列表：把电子表格里的编码复制到SKU_LIST数组中，保持每行一个编码，用引号和逗号分隔

3. 保存记事本为product-images.html，双击打开即可查看所有商品图片列表。

方案二：读取本地编码文件（适合大量商品） #

如果商品编码数量很多，不想逐个粘贴，可以用这个方案读取本地txt文件：

1. 导出编码文件：

   • 打开电子表格，复制商品编码列，粘贴到记事本，确保每行一个编码，保存为sku-list.txt

2. 复制以下代码到记事本，保存为product-images.html（和sku-list.txt放在同一文件夹）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品主图列表</title>
    <style>
        .product-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            padding: 20px;
        }
        .product-item {
            border: 1px solid #eee;
            padding: 10px;
            text-align: center;
        }
        .product-item img {
            max-width: 100%;
            height: auto;
            margin-bottom: 10px;
        }
        .sku-text {
            font-size: 14px;
            color: #333;
        }
        .upload-area {
            padding: 20px;
            border: 2px dashed #ccc;
            margin: 20px;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>商品主图列表</h1>
    <div class="upload-area" id="uploadArea">
        点击选择商品编码文件（每行一个编码的txt文件）
        <input type="file" id="fileInput" accept=".txt" style="display: none;">
    </div>
    <div class="product-list" id="productList"></div>

    <script>
        // ---------- 仅需修改此处 ----------
        const IMAGE_URL_TEMPLATE = "https://你的目标网站域名/images/{SKU}.jpg";
        // -----------------------------------

        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const productList = document.getElementById('productList');

        uploadArea.addEventListener('click', () => fileInput.click());
        fileInput.addEventListener('change', handleFileSelect);

        function handleFileSelect(e) {
            const file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function(event) {
                const skuText = event.target.result;
                const SKU_LIST = skuText.split('\n').filter(sku => sku.trim() !== '');

                productList.innerHTML = '';
                SKU_LIST.forEach(sku => {
                    const imageUrl = IMAGE_URL_TEMPLATE.replace("{SKU}", sku.trim());
                    const item = document.createElement('div');
                    item.className = 'product-item';
                    item.innerHTML = `
                        <img src="${imageUrl}" alt="商品${sku}主图" onerror="this.src='https://via.placeholder.com/200?text=图片加载失败'">
                        <div class="sku-text">${sku.trim()}</div>
                    `;
                    productList.appendChild(item);
                });
            };
            reader.readAsText(file);
        }
    </script>
</body>
</html>

3. 修改IMAGE_URL_TEMPLATE为目标网站的图片规则，双击打开HTML文件后，点击上传区域选择sku-list.txt，即可自动生成图片列表。

注意事项 #

• 确认图片URL模板正确：先手动验证一个编码的图片地址，确保替换{SKU}后能正常打开图片
• 若图片显示加载失败占位图，检查URL模板是否匹配目标网站的图片命名规则
• 部分浏览器（如Chrome）默认限制本地HTML读取本地文件，遇到此问题优先使用方案一

内容的提问来源于stack exchange，提问作者NBrown-designer