使用Cheerio进行Web Scraping时无法找到img标签的问题

原因分析 #

你用request-promise获取的是服务器直接返回的静态HTML源码，但目标网站的商品图片是通过JavaScript动态渲染加载的。静态源码里的a标签下并没有实际渲染出img元素，或者图片链接仅存放在data-src这类自定义属性中而非直接写入src，导致Cheerio解析不到预期的img节点。

解决方法 #

方法1：从静态HTML提取图片备用属性

先查看目标页面的静态源码，确认a标签或其内部是否有存储图片链接的自定义属性（比如data-src、data-lazy），直接提取这些属性值即可：

const url = "https://www.croma.com/oneplus-android-phones/bc/b-0948-95";

import $ from "cheerio";
import rp from "request-promise";

rp(url)
  .then((html) => {
    $(".plp-card-thumbnail a", html).each((index, element) => {
      // 根据实际属性名调整，比如data-src、data-image等
      const imgUrl = $(element).attr("data-src") || $(element).find("img").attr("data-src");
      console.log(`图片链接${index+1}:`, imgUrl);
    });
  })
  .catch((err) => {
    console.error(err);
  });

方法2：用无头浏览器渲染动态内容

如果静态HTML里完全没有图片链接，必须依赖JavaScript执行才能渲染出完整DOM，就用Puppeteer这类无头浏览器工具模拟真实浏览器加载页面：

import puppeteer from 'puppeteer';

const url = "https://www.croma.com/oneplus-android-phones/bc/b-0948-95";

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 等待网络空闲，确保页面资源加载完成
  await page.goto(url, { waitUntil: 'networkidle2' });

  // 提取渲染完成后的img链接
  const imgUrls = await page.$$eval('.plp-card-thumbnail a img', imgs => imgs.map(img => img.src));
  console.log(imgUrls);

  await browser.close();
})();

使用前需先安装依赖：npm install puppeteer

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