时间戳

首页 > 解决方案 > 刮擦：仅刮取第一张图像，其余图像填充占位符。为什么？

javascript - 刮擦：仅刮取第一张图像，其余图像填充占位符。为什么？

问题描述

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

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

这可能是什么原因？

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

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

标签： javascriptnode.jsweb-scrapingscreen-scrapingpuppeteer

解决方案

图像正在延迟加载。

src尚未加载的图像的正确性存储在名为的数据属性data-src中。您可以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,
    };
  });
});

推荐阅读