如何从隐藏的div类中获取图片？

Question

我正试图从一个网站的列表中抓取所有的图片。 由于我一直在练习刮片（用python），我认为我可以做到这一点没有任何问题，但问题是，我只能刮前2张图片，即使有更多的。下面是我的代码和不同的输出，我已经从前两张图片和第三张图片。你知道吗

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:list index out of range。所以我把第一、第二和第三张图片的外层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>

我不明白为什么div类的某些部分在3rd中丢失了。当我右键单击并查看3rd图片时，我可以看到与我在1st和2nd中看到的完全相同的结构。有没有人能帮我从第三张图片到最后一张图片的列表？你知道吗

另外，允许在这里发布实际的网站和几行实际的源代码吗？我试图具体解释这个问题，但如果不允许写下实际输出，我会立即删除这些。你知道吗

谢谢你。你知道吗

Answer 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.