使用 Beautiful Soup 提取图像“src”时出错

Question

我在使用 Python 2.7、beautifulsoup4 (4.2.1) 提取图像 src 时遇到困难。

我感兴趣的HTML部分是：

<div class="trb_embed_media ">  <figure imgratio="16x9" imgwidth="750" imgheight="450" data-role="imgsize_item" class="trb_embed_imageContainer_figure"><img src="http://www.trbimg.com/img-53e8dc49/turbine/lat-buzzfeed-la0011761750-20131007/750/16x9" data-height="450" data-width="750" data-ratio="16x9" itemprop="image" data-baseurl="http://www.trbimg.com/img-53e8dc49/turbine/lat-buzzfeed-la0011761750-20131007" alt="Buzzfeed" class="trb_embed_imageContainer_img" title="Buzzfeed" data-content-naturalwidth="2048" data-content-naturalheight="1365"></figure><div class="trb_embed_related" data-role="lightbox_metadata">      <span class="trb_embed_related_title">Buzzfeed</span>  <div class="trb_embed_related_credit">Jay L. Clendenin / Los Angeles Times</div>  <div class="trb_embed_related_caption">Buzzfeed's Los Angeles headquarters on Beverly Boulevard on Oct. 7, 2013.</div>  <div class="trb_embed_related_credit_and_caption">Buzzfeed's Los Angeles headquarters on Beverly Boulevard on Oct. 7, 2013. (Jay L. Clendenin / Los Angeles Times)</div></div>    </div>

我正在运行的代码是：

image_section = soup.find(class_ = "trb_embed_media")
print image_section
print "================="
img = image_section.find('img')['src']
print img

上面代码第2行的输出是：

<div class="trb_embed_media ">
<figure class="trb_embed_imageContainer_figure" data-role=" delayload  delayload_done imgsize_item">
<img alt="Buzzfeed" class="trb_embed_imageContainer_img" data-baseurl="http://www.trbimg.com/img-53e8dc49/turbine/lat-buzzfeed-la0011761750-20131007" data-content-naturalheight="1365" data-content-naturalwidth="2048" itemprop="image" title="Buzzfeed"/>
</figure>
<div class="trb_embed_related" data-role="lightbox_metadata">
<span class="trb_embed_related_title">
         Buzzfeed
</span>
<div class="trb_embed_related_credit">
         Jay L. Clendenin / Los Angeles Times
</div>
<div class="trb_embed_related_caption">
         Buzzfeed's Los Angeles headquarters on Beverly Boulevard on Oct. 7, 2013.
</div>
<div class="trb_embed_related_credit_and_caption">
         Buzzfeed's Los Angeles headquarters on Beverly Boulevard on Oct. 7, 2013. (Jay L. Clendenin / Los Angeles Times)
</div>
</div>
</div>

从上面的 img 标签可以看出。它缺少 src 属性，即使它存在于原始 HTML 源中。我在这里想念什么。请指教。

Answer 1

这是因为原始 HTML 源代码不包含src 属性，Javascript 在页面加载后添加该属性。

javascript 代码大概使用data-baseurl 属性生成src URL，添加大小和比例。

父<figure> 标记上的data-role 属性中的delayload 和imgsize_item 值也是一个提示。您必须根据给定的 data-content-naturalheight 和 data-content-naturalwidth 属性计算自己的宽高比，然后从那里开始。

如果您调整页面大小，您会看到该网站使用的是响应式设计；根据可用的水平空间大小加载不同的图像尺寸。

一个快速的实验表明，您可以在 URL 中填写 任何 大小，以及任何纵横比，并且图像是基于这些自动生成的。 p>

如果您想获得完整尺寸的图像，您所要做的就是加载基本 URL；它返回未缩放的图像。

javascript used to generate size and ratio 在 16x9、1x1 和 9x16 纵横比中进行选择，基于数据属性中的高度和宽度之间的比率：

img = soup.select('div.trb_embed_media img')[0]
width, height = map(int, (img['data-content-naturalwidth'], img['data-content-naturalheight']))
ratio = width / float(height)
ratio = '1x1' if 0.9 <= ratio <= 1.1 else '16x9' if ratio > 1.1 else '9x16'
img_url = '{}/{}/{}'.format(img['data-baseurl'], width, ratio)

对于生成http://www.trbimg.com/img-53e8dc49/turbine/lat-buzzfeed-la0011761750-20131007/2048/16x9 的示例，一个有效的图像：

>>> import requests
>>> from bs4 import BeautifulSoup
>>> r = requests.get('http://www.latimes.com/business/la-fi-tn-buzzfeed-deal-20140811-story.html')
>>> soup = BeautifulSoup(r.content)
>>> img = soup.select('div.trb_embed_media img')[0]
>>> width, height = map(int, (img['data-content-naturalwidth'], img['data-content-naturalheight']))
>>> ratio = width / float(height)
>>> ratio = '1x1' if 0.9 <= ratio <= 1.1 else '16x9' if ratio > 1.1 else '9x16'
>>> '{}/{}/{}'.format(img['data-baseurl'], width, ratio)
'http://www.trbimg.com/img-53e8dc49/turbine/lat-buzzfeed-la0011761750-20131007/2048/16x9'