如何在Nokogiri中解析图像href

Question

我正在使用Nokogiri解析网页，并想解析出图像URL。这是我的设置：

require 'nokogiri'
require 'open-uri'

doc = Nokogiri::HTML(open('https://themeforest.net/search?sort=sales'))

目标网站包含以下代码：

<div class="_2_3rp " style="padding-top:50.847457627118644%">            
  <div style=""> 
    <img class="_1xvs1" src="https://themeforest.img.customer.envatousercontent.com/files/274559780/screenshots/00-Preview.jpg?auto=compress%2Cformat&amp;fit=crop&amp;crop=top&amp;w=590&amp;h=300&amp;s=37354d884fd0f3b574238e013b4ea423"                                         
      title="Avada | Responsive Multi-Purpose Theme"                    
      alt="Avada | Responsive Multi-Purpose Theme" style="left: 0%;">            
  </div>                                                                     
</div>

但是，当我跑步时：

puts doc.search("//div[@class = '_2_3rp ']")

我得到以下内容：

  <div class="_2_3rp " style="padding-top:50.847457627118644%"><div style="height:100%" class="lazyload-placeholder"></div></div>
  <div class="_2_3rp " style="padding-top:50.847457627118644%"><div style="height:100%" class="lazyload-placeholder"></div></div>
  .....
  => nil

为什么我没有得到img类，却得到了lazyload-placeholder？我有什么办法可以克服这个问题，并摆脱图像占位符？

Answer 1

这是我想出的最少代码，它是测试您的断言所必需的：

require 'nokogiri'

doc = Nokogiri::HTML(<<EOT)
<div class="12345">
    <div>
        <img class="67890" src="https://foo.bar">
    </div>
</div>
EOT

doc.search('//div[@class=12345]').map(&:to_html)
# => ["<div class=\"12345\">\n" +
#     "    <div>\n" +
#     "        <img class=\"67890\" src=\"https://foo.bar\">\n" +
#     "    </div>\n" +
#     "</div>"]
#     "</div>"]

看起来好像有img标签。

您正在使用Nokogiri::XML进行解析。不会，因为发生严格的解析并且使用HTML（严格的解析），如果HTML格式错误，则可能会出现问题。

Answer 2

看起来此页面使用JavaScript加载图像，因此Nokogiri无法对其进行解析。

您可以为此使用水豚with driver。