使用 xpath 获取图像

Question

我一直在尝试从该网站抓取信息 https://www.fineandcountry.com/sa/property-for-sale/cape-town-clifton/property/929703，但我在获取属性的所有图像时遇到问题：它们位于属性样式内，这让我有些挣扎.我一直在努力做的事情：

images = response.xpath("//div[@class='search-results-gallery-property']
/a[@class='rotator_thumbs']/@style").extract()

但到目前为止这是空的。

这是它的样子：

<div class="search-results-gallery-property">
  <a style="background-image: 
url(https://static.propertylogic.net/property/8/200673/IMG_200673_3_small.jpg);" class="rotator_thumbs">
  </a></div>

对我做错了什么/如何从属性样式中提取有什么建议吗？谢谢！

Answer 1

您尝试使用的 class 名称似乎是动态生成的。这是它们在页面源代码中的样子：

<a href="https://static.propertylogic.net/properties/8/972/1900/929703/IMG_yPAH7LUOOusZs642oS1TjGTl9WIXaOUKWWMsXiSnL0luoixXTAyNV32n9kiM_hd.jpeg" class="fancybox-thumbs col-md-4 col-sm-6 col-xs-12" data-fancybox-group="property-images" style="margin-bottom: 10px; padding-right: 5px; padding-left: 5px;">
    <div class="col-md-12" style="background: url('https://static.propertylogic.net/properties/8/972/1900/929703/IMG_yPAH7LUOOusZs642oS1TjGTl9WIXaOUKWWMsXiSnL0luoixXTAyNV32n9kiM_small.jpeg'); height: 160px; padding-right: 0px; padding-left: 0px; background-size: cover; background-position: center;"> </div>
</a>

您可以选择两者中的任何一个来获取原始图像链接：

for item in response.css('a[data-fancybox-group="property-images"] > [style^="background"]::attr(style)').getall():
    yield {"image_link":item}

for item in response.xpath('//a[@data-fancybox-group="property-images"]/*[starts-with(@style,"background")]/@style').getall():
    yield {"image_link":item}

Answer 2

顺便说一下，您可以使用 .re() 来解析每个 URL（使用 SIM 代码）：

for item in response.xpath('//a[@data-fancybox-group="property-images"]/*[starts-with(@style,"background")]/@style').re(r"url\('([^']+)"):
    yield {"image_link":item}

使用 xpath 获取图像

Get images using xpath

python

xpath

web-crawler

scrapy

web-scraping