Puppeteer 在延迟加载页面中获取 <img> src 属性

Question

当我使用 puppeteer 抓取 a page 时，我尝试读取“img”元素的“src”属性以便稍后下载图像。

  const imgs = await page.$$eval("img.Article-itemVisualImg[src]", (imgs) =>
    imgs.map((img) => img.getAttribute("src"))
  );

我得到这样的数据。我怀疑这是由于延迟加载造成的，因为除了第一个图像之外的所有图像在“img”元素中都有“data-lazyimage”属性。

 'https://static.fnac-static.com/multimedia/Images/ES/NR/37/bd/6b/7060791/1545-1.jpg',
  'https://static.fnac-static.com/multimedia/Images/ES/NR/7a/d4/61/6411386/1545-1.jpg',
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'/%3E",
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'/%3E",
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'/%3E",
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'/%3E",
.....

我怎样才能得到所有图像的完整 URL JPG 文件，包括那些我得到一个以 "data:image/svg+xml 开头的字符串的图像”。我不明白发生了什么，因为所有“img”元素都有一个带有 JPG 文件 URL 的“src”属性。

Answer 1

你可以这样做：

imgs.map((img) => img.getAttribute("data-lazyimage") || img.getAttribute("src"))

如果有则获取惰性 src，如果不存在则获取 src

Answer 2

你是对的：除了第一个图像之外的所有图像都是 lazy-loaded。 data:image/svg+xml src 属性中的图像只是最小的占位符。

我们可以得出结论，除了第一个图像之外的所有图像都必须包含 data-lazyimage 属性；第一个将有 src。考虑到这一点，让我们首先查询惰性属性，如果它不存在，则回退到 src:

const imgs = await page.$$eval("img.Article-itemVisualImg[src]", (imgs) =>
  imgs.map((img) => img.getAttribute("data-lazyimage") || img.getAttribute("src"))
);

Puppeteer 在延迟加载页面中获取 <img> src 属性

Puppeteer get <img> src attribute in a lazy loading page

lazy-loading

image

web-scraping

puppeteer