使用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

您尝试使用的类名似乎是动态生成的。这是它们在页面源中的方式：

<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}