刮擦：只刮取第一张图像，其余的用占位符填充。为什么？

Question

我正在使用 JavaScript 和无头浏览器 Puppeteer 抓取工作网站。

我成功地从一个工作网站获取了前 6 个公司徽标项目。但是，在前 6 个徽标之后，它会突然停止打印出真正的徽标（因此，为我提供了 src URL），而是输入了一个占位符图像。

这可能是什么原因？

仅供参考，我正在抓取这样的图像：

const image = card.querySelector('div.job-element__logo img').src

Answer 1

图片正在延迟加载。

尚未加载的图像的正确src 存储在名为data-src 的data attribute 中。您可以将page.evaluate() 与Array.from() 结合使用来过滤和抓取所有正确的图像src 值：

const images = await page.evaluate(() => {
  return Array.from(document.querySelectorAll('.job-element__logo img'), e => e.dataset.src ? `https://www.stepstone.de${e.dataset.src}` : e.src);
});

如果您想为每个职位抓取职位、公司、描述和图片，您可以使用以下解决方案：

const jobs = await page.evaluate(() => {
  return Array.from(document.querySelectorAll('.job-element'), card => {
    const position = card.querySelector('.job-element__body__title').textContent.trim();
    const company = card.querySelector('.job-element__body__company').textContent.trim();
    const description = card.querySelector('.job-element__body__details').textContent.trim();
    const image_element = card.querySelector('.job-element__logo img');
    const image = image_element.dataset.src ? `https://www.stepstone.de${image_element.dataset.src}` : image_element.src;

    return {
      position,
      company,
      description,
      image,
    };
  });
});