如何使用Puppeteer正确抓取图片src属性？

你遇到的问题核心是目标网站的图片采用了懒加载机制，且页面的swiper组件为动态渲染，之前的代码既没等待元素完全加载，也未处理懒加载的属性映射逻辑。

失败原因拆解 #

• 首次尝试：选择器层级过于严格，且仅等待domcontentloaded，此时swiper组件可能尚未完成渲染，导致无法匹配到元素。
• 第二次尝试：未等待图片元素加载完成，懒加载图片的真实地址还未赋值给src属性，因此返回空。
• 第三次尝试：.swiper-lazy-loaded元素已存在，但图片的真实地址暂存于data-src或data-lazy这类懒加载属性中，而非src。

修正后的代码 #

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  try {
    await page.setDefaultNavigationTimeout(0);
    await page.setViewport({ width: 1024, height: 768 });

    await page.goto(
      `https://www.sirved.com/restaurant/essex-ontario-canada/dairy-freez/1/menus/3413654`,
      {
        waitUntil: "networkidle2", // 等待网络空闲，确保资源加载更充分
      }
    );

    // 等待swiper容器内的图片元素出现且可见
    await page.waitForSelector("#menus .swiper-slide img", { visible: true, timeout: 0 });

    // 抓取图片真实地址：优先取src，为空则 fallback 到懒加载属性
    const fetchImgSrc = await page.evaluate(() => {
      const imgs = document.querySelectorAll("#menus .swiper-slide img");
      return Array.from(imgs).map(img => img.src || img.getAttribute("data-src") || img.getAttribute("data-lazy"));
    });

    console.log(fetchImgSrc);
  } catch (err) {
    console.log(err);
  }

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

关键改动说明 #

1. 等待策略优化：将页面加载等待策略改为networkidle2，确保静态资源加载更彻底；同时通过waitForSelector等待目标图片可见，保证元素已完成渲染。
2. 懒加载属性兼容：针对懒加载图片的特性，代码优先读取src，若为空则尝试读取data-src或data-lazy这类存储真实地址的属性。
3. 选择器简化：放弃过于严格的层级选择器，降低因页面结构微小变动导致的匹配失败概率。

内容的提问来源于stack exchange，提问作者Everett De Leon