使用Cheerio获取img标签src属性返回undefined如何解决

需要提取指定HTML片段中img标签的src属性值，目标HTML片段如下：

<div class="page-break no-gaps">
  <img id="image-0" src="https://foo.bar/image.jpg" class="wp-image" alt="Title">
</div>

编写的属性获取逻辑如下：

getImageSrc(imageObj: Cheerio | undefined): string {
    let image
    image = imageObj?.attr('src')
    console.log(image)
}

使用的节点选择器为：

chapterDetailsSelector = 'div.page-break > img'

代码执行后控制台始终输出undefined，无法获取到正确的图片src地址。

按以下顺序逐点排查即可解决问题：

• 先确认选中的节点是否正确
  选择器div.page-break > img本身语法没问题，但很可能实际运行时拿到的imageObj不是img节点：可以先在方法里打印节点标签名校验，如果拿到的是外层div节点，自然读不到src属性。
• 校验节点属性是否正确挂载
  从代码里的wp-image类可以判断目标站点是WordPress搭建的，这类站点大多会给图片做懒加载，初始DOM里img标签不会直接挂src属性，真实地址会存在data-src/data-lazy-src这类自定义属性上。你可以直接打印选中节点的所有属性列表，确认src字段是否真实存在。
• 补全边界判断逻辑，兼容Cheerio对象特性
  Cheerio选中的结果是类数组对象，哪怕没匹配到节点也不会直接返回null/undefined，直接调用attr很容易出现预期外的undefined。可以把方法改成下面的写法，方便定位问题：

getImageSrc(imageObj: Cheerio | undefined): string {
    // 先判断节点是否有效
    if (!imageObj || imageObj.length < 1) {
        console.log('未匹配到目标节点')
        return ''
    }
    // 校验节点类型
    const targetNode = imageObj[0]
    console.log('当前节点标签：', targetNode.tagName)
    console.log('节点所有属性：', targetNode.attribs)
    // 优先取src，不存在则尝试取懒加载属性
    const src = imageObj.attr('src') || imageObj.attr('data-src') || imageObj.attr('data-lazy-src') || ''
    console.log('最终获取到的图片地址：', src)
    return src
}

• 确认选择器执行时机
  如果你是爬取动态渲染的页面内容，要确认执行选择逻辑的时候，目标DOM片段已经完整加载到Cheerio实例里，异步内容没加载完成就去选节点，也会拿不到有效结果。

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