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

Question

我在使用python2.7 beauthoulsoup4（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>

我运行的代码是：

^{pr2}$

上面代码的第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属性来生成srcURL，并添加一个大小和比率。在

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

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

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

如果您想获得完整尺寸的图像，只需加载基本URL；它将返回未缩放的图像。在

javascript used to generate size and ratio根据数据属性中的高度和宽度之比，在16x9、1x1和{}之间选择纵横比：

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的示例，一个有效的图像：

^{pr2}$