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

我正在用JavaScript和一个无头浏览器木偶演员抓取一个工作网站

我从一个工作网站上成功地抓取了前6个公司标志项目。但是，在前6个徽标之后，它会突然停止打印真正的徽标（因此，为我提供

src

url），而是输入一个占位符图像

这可能是什么原因

仅供参考，我正在抓取如下图像：

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

---

正在延迟加载图像。

尚未加载的正确图像存储在名为

data 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,
    };
  });
});

---

它们可能是用javascript加载的。他们有真实源的属性吗？开发人员偶尔会加载占位符图像，这样当实际需要的图像加载时，页面上不会出现内容跳转或明显的变化。尝试通过记录

.dataset

查看元素上的数据-可能实际的

src

将列在该对象中。我试图从该站点获取公司徽标：似乎与延迟加载有关。我没有看到另一个源数据集。在带有占位符ImagesHanks的数据集上有一个

data src

属性！剩下的唯一一件事是，它在我的每个数组项（作业）中为我提供了作为数组的所有徽标。

const-position=wait page.evaluate（（）=>array.from（document.queryselectoral（'.job-element'））.map（card=>{const-position=card.querySelector（'.job-element\uuu-body\uu-title'）。innerText-const company=card.querySelector（'.job-element\uuuu body\uuu company'）.innerText

const description=card.querySelector（'.job-element\uu body\uu details'）.innerText const image=Array.from（document.querySelectorAll（'.job-element\uu logo img'）），card=>card.dataset.src？“https://www.stepstone.de“+card.dataset.src:card.src）}）

@MarkusMühlerdt我已经更新了我的答案，包括收集每个职位的职位、公司、描述和形象的解决方案。它很有效！这太棒了-非常感谢你，格兰特！

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,
    };
  });
});