從 src 屬性獲取原始 URL 而不是 base64 url

Question

我正在嘗試從該站點獲取數據： https://balkangreenenergynews.com/country/romania/

問題是當我嘗試通過“src”屬性提取圖像 url(image_link) 時，它返回 base64 格式的 URL。

我在下面給出了 Output：

[{link:
 'https://balkangreenenergynews.com/...nsson/',
image_link:
 'data:image/svg+xml;base64,PHN2ZyB4...3ZnPg==',
lead_text:
 'Distribution ... farm.',
time: '29 July 2021',
author: '' }, ...]

代碼：

const scraperObject = {
  url: 'https://balkangreenenergynews.com/country/romania/',
  async scraper(browser){
  let page = await browser.newPage();
  await page.goto(this.url)
  .catch(error => console.error(error));
  try {
    await page.waitForSelector("div.four-boxes.multi-boxes", { visible: true });
    //console.info("Country News Page loaded");
    
    page.on("console", msg =>
      msg.type() === "error"
        ? console.error(msg.text())
        : console.info(msg.text())
    );
    let data = await page.evaluate(() => {
      const articles = document.querySelectorAll("div.bn-box");
      const textContent = elem => (elem ? elem.textContent.trim() : ""); // helper function
      const articleArray = [];
      //let element = await page.$('your selector')
      //await element.evaluate(el => el.textContent)
      articles.forEach(article => {
        
        //console.log(article.querySelector("div.bn-box-img > a img").getAttribute("src"))
        articleArray.push({
          title:
            textContent(article.querySelector("div.bn-box > a > h3")) || "",
          link: article.querySelector("div.bn-box > a")
            ? article.querySelector("div.bn-box > a").getAttribute("href")
            : "",
          image_link: article.querySelector("div.bn-box-img > a > img")
            ? article.querySelector("div.bn-box-img > a > img").getAttribute("src")
            : "",
          lead_text:
            textContent(article.querySelector("div.bn-box > p")).split(' ').slice(4).join(' ') ||
            "",
          time: textContent(article.querySelector("p > strong")) ||
          "",
          author: ""
            //textContent(article.querySelector(".entry-author a")) || ""
        });
      });
      //console.log(articles);
      //return;
      return articleArray;
    });
    console.log(data)

  } catch (error) {
    console.log(":(");
    //console.error("No articles found for " + country.slug + error);
  }
}}

當我將這些 URL 直接保存到數據庫時，如何獲得特定的 URL？

Answer 1

木偶戲打擾我們了

我能夠復制您的代碼：

• https://github.com/jrichardsz/dokku-puppeteer-example/blob/rare-puppeter-behavior/app.js

根據以下研究，木偶正在改變真正的html 。

我直接在瀏覽器控制台上嘗試了你的代碼，我得到了第一篇文章的 html：

const articles = document.querySelectorAll("div.bn-box");
articles[0].innerHTML

但是當我運行你的 puppeter 代碼打印第一篇文章（ console.log(articles[0].innerHTML); ）時，同一篇文章的 html 發生了變化：

我在互聯網上沒有找到任何關於這種木偶行為的信息

只是為了檢查

如果您單擊某篇文章，在加載后檢查我會看到：

我不知道，但原始頁面可能會根據客戶端更改響應 html：

• 真正的人類瀏覽器
• 無頭或在 memory 瀏覽器中進行自動化（木偶）

嘗試使用 selenium 代替木偶

您可以使用此啟動器來使用 selenium 代替 puppeter