电子商城开发：JS从XML拉取图片到HTML表格显示Null求助

你遇到的核心问题是：XML里的节点内部并不是文本内容，而是一个带href属性的<image>子元素，你原有的JS代码试图读取它的nodeValue自然会返回null——因为这个子元素本身没有文本节点，只有属性值。

修复步骤 #

1. 先定位到节点下的<image>子元素
2. 读取该子元素的href属性值
3. 用这个href值生成HTML的<img>标签，这样才能在表格中显示图片

修改后的JavaScript代码 #

for (i = 0; i < x.length; i++) {
    // 获取IMAGE节点下的<image>子元素
    const imageElement = x[i].getElementsByTagName("IMAGE")[0].getElementsByTagName("image")[0];
    // 读取href属性，若不存在则设为默认占位图路径
    const imageSrc = imageElement ? imageElement.getAttribute("href") : "placeholder.jpg";
    // 构建表格行，把图片标签插入对应单元格
    table += "<tr>" +
        "<td><img src='" + imageSrc + "' alt='Product image' style='max-width: 100px; height: auto;' /></td>" +
        "<td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td>" +
        "<td>" + x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue + "</td>" +
        "<td>" + x[i].getElementsByTagName("DELIVERY")[0].childNodes[0].nodeValue + "</td>" +
    "</tr>";
}

代码说明 #

• 增加了对<image>元素的存在性判断，避免当某个产品没有图片时触发JS报错
• 用getAttribute("href")正确读取图片的路径值，替代原有的文本节点读取逻辑
• 生成<img>标签时添加了基础样式（最大宽度100px），避免图片撑爆表格，你可以根据需求调整样式参数
• 添加了alt属性，符合HTML语义化要求，也能在图片加载失败时显示提示文本

这样修改后，表格里的IMAGE列就能正确显示产品图片了。

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