如何从隐藏的div类中抓取图片?

时间:2019-08-10 08:00:09

标签: python html web-scraping

我正在尝试从一个网站上的列表中抓取所有图片。 由于我不时地练习使用python进行抓取,所以我认为我可以做到这一点而没有任何问题,但问题是我只能抓取前两张图片,即使不止这些。以下是我的代码以及从前两张图片和第三张图片获得的不同输出。

import urllib.request
import urllib
from bs4 import BeautifulSoup
import time

#go to the webpage.
page=urllib.request.urlopen("https://www.tripadvisor.com/VacationRentalReview-g32655-d4751024-West_HOLLYWD_area_FAB-Los_Angeles_California.html")

#parse html
soup=BeautifulSoup(page,"html.parser")    
time.sleep(3)

#check the length of the listings if it matches the number of pictures.
images=soup.findAll("div", {"class":"media-media-carousel-MediaCarousel__imageGallerySlide--3HC1k"})
print (len(images))

#get the first 2 pictures.
for i in range(0,2,1):
    images=soup.findAll("img", {"class":"media-media-carousel-MediaCarousel__isLandscape--3tIc2"})
    each_image=images[i]    
    each_image_detail=each_image["src"]

    print (each_image_detail)

#The outputs:
#58
#https://media-cdn.tripadvisor.com/media/vr-splice-j/00/26/29/8c.jpg
#https://media-cdn.tripadvisor.com/media/vr-splice-j/02/11/12/01.jpg

由于该列表中有58张图片,所以我注意到图像的长度为58。但是,当我将范围从2增大到3时,我看到了一个错误,IndexError:列表索引超出范围。因此,我在第一,第二和第三张图片上抓了外部div类,以查看发生了什么。

images=soup.findAll("div", {"class":"media-media-carousel-MediaCarousel__imageGallerySlide--3HC1k"})
print (images[0])
print (images[1])
print (images[2])

#The outputs:
<div class="media-media-carousel-MediaCarousel__imageGallerySlide--3HC1k" style="-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0)"><div class="media-media-carousel-MediaCarousel__carouselImage--SYdol"><img alt="Redwood Deck with tables, umbrella, chaise lounges" class="media-media-carousel-MediaCarousel__isLandscape--3tIc2" src="https://media-cdn.tripadvisor.com/media/vr-splice-j/00/26/29/8c.jpg"/></div></div>
<div class="media-media-carousel-MediaCarousel__imageGallerySlide--3HC1k" style="-webkit-transform:translate3d(100%, 0, 0);-moz-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);-o-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)"><div class="media-media-carousel-MediaCarousel__carouselImage--SYdol"><img alt="Living Room" class="media-media-carousel-MediaCarousel__isLandscape--3tIc2" src="https://media-cdn.tripadvisor.com/media/vr-splice-j/02/11/12/01.jpg"/></div></div>
<div class="media-media-carousel-MediaCarousel__imageGallerySlide--3HC1k" style="-webkit-transform:translate3d(200%, 0, 0);-moz-transform:translate3d(200%, 0, 0);-ms-transform:translate3d(200%, 0, 0);-o-transform:translate3d(200%, 0, 0);transform:translate3d(200%, 0, 0)"></div>

我不明白为什么3级缺少div类的某些部分。右键单击并查看第三张图片时,可以看到与第一张和第二张图片完全相同的结构。谁能帮我解决从第三张图片到最后一张图片的刮擦?

p.s。是否可以在此处发布实际网站和几行实际源代码?我试图具体说明问题,但是如果不允许写下实际输出,我将立即删除它们。

谢谢。

1 个答案:

答案 0 :(得分:1)

如果您正在<img>标签中查找图像,则该页面会通过Javascript动态添加它们。 BeautifulSoup在这里不能为您提供帮助,因为它不执行Javascript。

但是,您可以使用其他一些库,例如selenium。或者,您可以使用re并从页面本身解析所需的数据。这应该给你一个例子:

import re
import requests

url = 'https://www.tripadvisor.com/VacationRentalReview-g32655-d4751024-West_HOLLYWD_area_FAB-Los_Angeles_California.html'

html_page = requests.get(url).text

urls = re.findall(r'"jumboUrl":"([^"]+)","description":"([^"]+)"', html_page)

print('Length =', len(urls))

for img_url, description in urls:
    print(img_url, description)

打印图像数量,其URL和描述:

Length = 58
https://media-cdn.tripadvisor.com/media/vr-splice-j/00/26/29/8c.jpg Redwood Deck with tables, umbrella, chaise lounges
https://media-cdn.tripadvisor.com/media/vr-splice-j/02/11/12/01.jpg Living Room
https://media-cdn.tripadvisor.com/media/vr-splice-j/02/11/11/fd.jpg Living Room
https://media-cdn.tripadvisor.com/media/vr-splice-j/02/11/11/fe.jpg Living Room
https://media-cdn.tripadvisor.com/media/vr-splice-j/02/11/11/ff.jpg Living Room
https://media-cdn.tripadvisor.com/media/vr-splice-j/02/11/12/00.jpg Living Room
https://media-cdn.tripadvisor.com/media/vr-splice-j/02/11/12/02.jpg Kitchen
https://media-cdn.tripadvisor.com/media/vr-splice-j/00/26/29/1f.jpg Front of duplex
...and so on.