Извлечение изображений с помощью xpath

Question

Я пытался получить информацию с этого сайта https://www.leadhome.co.za/property/poortview-ah/roodepoort/lh-95810/magnificent-masterpiece-in-poortview-, и у меня возникли проблемы с получением всех изображений собственности; более конкретно, URL

так выглядит класс:

<div class="lazy-image listing-slider-carousel-item lazy-image-loaded">
   <div class="lazy-image-background" style="background-image: url(&quot;https://s3-eu-west-1.amazonaws.com/leadhome-listing-photos/025c90ab-9c87-47d5-b11c-1cfbce3f67f2-md.jpg&quot;);"></div>
</div>

Что у меня есть:

        for item in response.xpath('//div[@class="lazy-image-background"]/*[starts-with(@style,"background-image")]/@style').getall():
            yield {"image_link":item}

Но, к сожалению, это пусто. Любые советы о том, что я делаю не так? Спасибо!

Answer 1

Если вы просматриваете исходный html источник этой веб-страницы (CTRL + U на веб-браузере google Chrome, !!! not html код из раздела Инструменты / элементы разработчика Crhome)
вы увидите 2 важные вещи:

1. Изображения в тегах типа <div class="lazy-image listing-slider-carousel-item lazy-image-loaded">, а также другие данные не существуют внутри этих html тегов.
2. Все данные хранятся внутри script тег и внутри window.REDUX_INITIAL_STATE javascript переменная:
   
   

В этом случае мы можем преобразовать данные из переменной javascript в формат basi c python dict с использованием встроенного python модуля json.
Самая сложная часть этой задачи - правильно разместить содержимое тега script в json.loads функция. Это должен быть строго текст после window.REDUX_INITIAL_STATE = и перед следующей javascript операцией (в данном случае перед последним символом ;). В результате мы получим следующий код:

def parse(self, response):
    script_tag = [script for script in response.css("script::text").extract() if "window.REDUX_INITIAL_STATE = {" in script]
    script_data = json.loads(script_tag[0].split("window.REDUX_INITIAL_STATE = ")[-1][:-1], encoding="utf-8")

Как видно на следующем снимке экрана отладчика, все данные успешно преобразованы: Изображения, хранящиеся в script_data['app']['listing']['listing']['entity']['lh-95810']['images'] в виде списка словарей: lh-95810 является идентификатором объекта, поэтому в обновленном коде этот идентификатор объекта будет выбираться отдельно для возможности его использования на других страницах:

def parse(self, response):
    script_tag = [script for script in response.css("script::text").extract() if "window.REDUX_INITIAL_STATE = {" in script]
    script_data = json.loads(script_tag[0].split("window.REDUX_INITIAL_STATE = ")[-1][:-1], encoding="utf-8")
    entity_key = [k for k in script_data['app']['listing']['listing']['entity'].keys()]
    images = [image["medium"] for image in script_data['app']['listing']['listing']['entity'][entity_key[0]]['images']]

Этот веб-сайт использует javascript для отображения данных на веб-странице. Однако любой сформированный контент javascript имеет * корни в оригинальном html коде. Этот подход использует только встроенный модуль json и не требует выбора css или Xpath.

Answer 2

Вы можете использовать xpath как:

//div[@class="lazy-image-background" and contains(@style, "background-image: url")]

Это даст вам все элементы div , содержащие изображения с URL-адресом на странице. Затем вы можете добавить код для извлечения URL-адреса изображения из каждого элемента

Answer 3

/* - поиск дочернего элемента, попробуйте без него

response.xpath('//div[@class="lazy-image-background"][starts-with(@style,"background-image")]')