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