title: Parse image url nokogiri
body: <p>I need to parse out the image URL from HTML much like the following:</p>
  
  <pre><code>&lt;p&gt;&lt;a href="http://blog.website.com/wp-content/uploads/2012/02/image_name.jpg" &gt;&lt;img class="aligncenter size-full wp-image-12313" alt="Example image Name" src="http://blog.website.com/wp-content/uploads/2012/02/image_name.jpg" width="630" height="119" /&gt;&lt;/a&gt;&lt;/p&gt;
  </code></pre>
  
  <p>So far I am using Nokogiri to parse out <code>&lt;h2&gt;</code> tags with:</p>
  
  <pre><code>require 'rubygems'
  require 'nokogiri'
  require 'open-uri'
  
  page = Nokogiri::HTML(open("http://blog.website.com/"))
  headers = page.css('h2')
  
  puts headers.text
  </code></pre>
  
  <p>I have two questions:</p>
  
  <ol>
  <li>How can I parse out the image url?</li>
  <li>Ideally I'd print to the console in this format:</li>
  </ol>
  
  <pre>
   1. 
  Header 1
  image_url 1
  image_url 2 (if any)
   2. 
  Header 2
  2image_url 1
  2image_url 2 (if any)
  </pre>
  
  <p>And so far I haven't been able to print my headers in this nice format.  How can I do so?</p>
  
  <pre><code>&lt;h2&gt;&lt;a href="http://blog.website.com/2013/02/15/images/" rel="bookmark" title="Permanent Link to Blog Post"&gt;Blog Post&lt;/a&gt;&lt;/h2&gt;
            &lt;p class="post_author"&gt;&lt;em&gt;by&lt;/em&gt; author&lt;/p&gt;
            &lt;div class="format_text"&gt;
      &lt;p style="text-align: left;"&gt;Blog Content &lt;/p&gt;
  &lt;p style="text-align: left;"&gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. &lt;/p&gt;
  &lt;p style="text-align: center;"&gt;&lt;a href="http://blog.website.com/wp-content/uploads/2012/02/image21.jpg" &gt;&lt;img class="alignnone size-full wp-image-23382" alt="image2" src="http://blog.website.com/wp-content/uploads/2012/02/image21.jpg" width="630" height="210" /&gt;&lt;/a&gt;&lt;/p&gt;
  &lt;p style="text-align: left;"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. &lt;/p&gt;
  &lt;p style="text-align: center;"&gt;&lt;b id="internal-source-marker_0.054238131968304515"&gt;Items: &lt;a href="http://www.website.com/threads?src=login#/show/thread/A_abvaf812e3"  target="_blank"&gt;Items for Spring&lt;/a&gt;&lt;/b&gt;&lt;/p&gt;
  &lt;p style="text-align: center;"&gt;Lorem Ipsum.&lt;/p&gt;
  &lt;p style="text-align: center;"&gt;&lt;b id="internal-source-marker_0.054238131968304515"&gt;More Items: &lt;a href="http://www.website.com/threads#/show/thread/A_abv2a6822e2"  target="_blank"&gt;Lorem Ipsum&lt;/a&gt;&lt;/b&gt;&lt;/p&gt;
  &lt;p style="text-align: center;"&gt;Lorem Ipsum.&lt;/p&gt;
  &lt;p style="text-align: center;"&gt;&lt;b id="internal-source-marker_0.054238131968304515"&gt;Still more items: &lt;a href="http://www.website.com/threads#/show/thread/A_abv7af882e3"  target="_blank"&gt;Items:&lt;/a&gt;&lt;/b&gt;&lt;/p&gt;
  &lt;p style="text-align: center;"&gt;Lorem Ipsum.&lt;/p&gt;
  &lt;p style="text-align: center;"&gt;&lt;b id="internal-source-marker_0.054238131968304515"&gt;Lorem ipsum: &lt;a href="http://www.website.com/threads?src=login#/show/thread/A_abvea6832e8"  target="_blank"&gt;Items&lt;/a&gt;&lt;/b&gt;&lt;/p&gt;
  &lt;p style="text-align: center;"&gt;Lorem Ipusm&lt;/p&gt;
  &lt;p style="text-align: center;"&gt;&lt;b id="internal-source-marker_0.054238131968304515"&gt;
          &lt;/div&gt;  
            &lt;p class="to_comments"&gt;&lt;span class="date"&gt;February 15, 2013&lt;/span&gt; &amp;nbsp; &lt;span class="num_comments"&gt;&lt;a href="http://blog.website.com/2013/02/15/Blog-post/#respond" title="Comment on Blog Post"&gt;No Comments&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;
  </code></pre>