JavaScript使用XPath提取HTML中img标签src属性失效问题排查

核心问题是XPath路径层级编写错误，和XPathResult配置无关：

1. 核对提供的HTML结构：目标img标签的层级为「外层容器div → 第一层子div（index=0）→ 第二层子div（class=col-lg-2 col-3）→ a标签 → img标签」，原代码写的XPath./div/div/a/img[@src]漏了中间包裹a标签的col层div，导致根本匹配不到目标img节点，后续读取src属性自然失败。
2. 代码缺少节点存在性校验：当XPath未匹配到节点时，resultImg.singleNodeValue为null，直接读取.src属性会抛出空值错误。
3. 图片尺寸替换逻辑不匹配：当前要获取的src路径中不存在mtiny字符串，原replace('mtiny', 'large')逻辑不会生效。

// 修正XPath路径，补全缺失的div层级
const imgResult = xmlDoc.evaluate(
  './div/div/div/a/img[@src]',
  node,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
);
const targetImg = imgResult.singleNodeValue;

if (targetImg) {
  // 用getAttribute读取原始属性值，避免浏览器自动解析src带来的路径偏差
  let bookImgSrc = targetImg.getAttribute('src');
  // 按站点实际图片尺寸规则替换路径，当前示例中小图路径带/t1/段，替换为大尺寸对应路径段即可
  bookImgSrc = bookImgSrc.replace('/t1/', '/large/');
  imgCard.src = bookImgSrc;
  divCard.appendChild(imgCard);
  console.log(imgCard);
} else {
  console.warn('未匹配到目标图片节点，请检查传入的node上下文是否为最外层row容器');
}

• 你怀疑的XPathResult.FIRST_ORDERED_NODE_TYPE配置完全正确，该配置的作用就是返回第一个匹配的节点，符合当前单图片提取的场景
• 如果后续XPath匹配失败，可以在浏览器控制台逐层调试：先执行./div看是否返回第一层子节点，逐层往下验证，能快速定位层级写错的问题
• 读取HTML原生属性时优先用getAttribute方法，比直接读取DOM对象的属性更稳定，不会受浏览器默认行为干扰

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