title: Javascript print in a new window won't display images
body: <p>I'am struggling with a problem and I was hoping you can help me. I created a function that prints out data from inputs in a page. However, logo I am using on a print page won't be displayed like as if a link to the image is broken. Any thoughts?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>function printReport() {
      win=null;
      var vin = $("input[name='vin']").val();
      var make = $("select[name='make']").val();
      var printData = '&lt;table width="960" border="0" align="center"&gt; &lt;tr&gt; &lt;td colspan="2"&gt;&lt;img src="http://localhost/site/images/logo_print.png" width="291" height="109" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt;&lt;div class="print-title" align="center"&gt;Service report &lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td width="196"&gt;Vin:&lt;/td&gt; &lt;td width="754"&gt;&lt;b&gt;'+ vin +'&lt;/b&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Make:&lt;/td&gt; &lt;td&gt;&lt;b&gt;'+ make +'&lt;/b&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;';
      win = window.open();
      self.focus();
      win.document.open();
      win.document.write('&lt;'+'html'+'&gt;&lt;'+'head'+'&gt;&lt;'+'style'+'&gt;');
      win.document.write("body, td { height: 25px; font-family: 'PT Sans', sans-serif; font-size: 17px; color:#333333;} .logo{ background:url(http://localhost/clubdfrance/images/logo_print.png); background-repeat:no-repeat; display:block; width:291px; height:109px;} .print-title{ display:block; margin-top:10px; font-size: 25px; }");
      win.document.write('&lt;'+'/'+'style'+'&gt;&lt;'+'/'+'head'+'&gt;&lt;'+'body'+'&gt;');
      win.document.write(printData);
      win.document.write('&lt;'+'/'+'body'+'&gt;&lt;'+'/'+'html'+'&gt;');
      win.document.close();
      win.print();
      win.close();
  </code></pre>