title: Create PDF from HTML in Google Apps Script and include images - Images not showing up
body: <p>I want to create PDF dynamically. That means I am taking files from Google Drive and then putting them in a HTML code and trying to create PDF out of it.</p>
  
  <p>Everything is working fine , except images are not showing up.</p>
  
  <p>What I am doing right now is :</p>
  
  <ol>
  <li>Create HtmlOutput from HTML string.</li>
  <li>Getting blob of that HTML.</li>
  <li>Then that blob getAs PDF</li>
  <li>Then finally saving that PDF in drive.</li>
  </ol>
  
  <p>I thought maybe it need some time to render images so I have added sleep.</p>
  
  <p>Alternative suggestions/solutions/code is also welcomed.</p>
  
  <p>Here is the code I am using ::</p>
  
  <pre><code>function htmlToPDF() {
      var file1="0BweO_SXcQGqgcEV3Mk9QYVRMczQ";
      var file2="0BweO_SXcQGqgVU93ZU56WkRkN3c";
      var file3="0BweO_SXcQGqgMkIxTlhKajk5MFk";
      var html = "&lt;!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'&gt; &lt;html xmlns='http://www.w3.org/1999/xhtml'&gt; &lt;head&gt; &lt;meta http-equiv='Content-Type' content='text/html; charset=utf-8' /&gt; &lt;title&gt;High Return Real Estate&lt;/title&gt; &lt;style&gt; @charset 'utf-8'; /* CSS Document */ body,html{ font-family: 'Lato', sans-serif; background:#dfe7ea; margin-top: 0; margin-bottom:0; } .main_wrapper { width: 930px; margin: 0 auto; background: #fff; padding: 0 23px 0 23px; box-shadow: 1px 1px 8px -1px #bbbbbb; } .top_header { background: #dfe9e9; display: inline-block; width: 100%; margin-bottom: 6px; } .left_top { display: inline-block; width: 70%; padding: 26px 0 26px 50px; float: left; } p.contact_person.right_person { border-right: 0; padding-left: 25px; display: inline-block; } p.contact_person { width: 214px; display: inline-block; text-align: left; border-right: 1px solid #ccd4d3; } .left_top p span { font-size: 13px; color: #000; display: inline-block; width: 100%; margin-top: 2px; } .left_top p { font-size: 20px; font-weight: bold; color: #ea9a5a; margin: 0; } .right_top img { border-top: 7px solid #496bb3; border-bottom: 7px solid #496bb3; padding: 16px 5px 13px 4px; } .right_top { display: inline-block; position: absolute; background: #fff; } .galleryimage_main img { width: 100%; display: inline-block; } .property_address { } .property_address p { font-size: 15px; text-transform: uppercase; color: #fff; margin-bottom: 0; margin-top: 4px; } .common_box_style { padding: 20px; background: #496bb3; text-transform: uppercase; } .common_box_style h2 { margin-top: 2px; color: #54bb73; font-size: 20px; } .property_information { margin-left: 6px; } .property_information ul li p { font-size: 15px; color: #fff; text-transform: capitalize; margin-bottom: 3px; margin-top: 0; } .property_information ul li { list-style: none; margin-bottom: 5px; } .property_information ul li span { font-size: 15px; color: #fff; text-transform: capitalize; margin-bottom: 3px; margin-top: 0; width: 100px; display: inline-block; text-align: left; } .property_information ul { padding-left: 0; width: auto; display: inline-block; float: left; margin-right: 15px; margin-top: 0; margin-bottom: 4px; } .property_information ul li span.value_field { font-size: 13px; } ul.grpleft li span { width: 136px; } p.cash_prize { text-align: center; font-size: 18px; font-weight: bold; color: #fff; display: inline-block; width: 100%; margin: 0; } p.cash_prize span { padding-left: 10px; } .margintop{ margin-top: 6px; } .left_col { width: 34%; float: left; } .right_col { display: inline-block; width: 66%; } .gallery_small_images { display: inline-block; width: 99%; margin-left: 6px; margin-top: 6px; height: 232px; overflow: hidden; } .gallery_small_images img{ width:100%; } .gallery_small_image2 { width: 50%; float: left; } .gallery_small_image3 { width: 49%; display: inline-block; float: left; margin-left: 6px; } table.expense_info tr td.exp_info_disc { font-size: 14px; color: #fff; text-transform: capitalize; text-align: left; } tr.total_exp td { padding-top: 13px; padding-bottom: 30px; } .cashflow h2 { margin-bottom: 7px; } .roi input[type='text'] { font-size: 23px; text-align: center; font-weight: bold; height: 33px; margin-bottom: 5px; } .roi h2 { margin-top: 24px; font-size: 22px; font-weight: 800; } tr.total_exp { font-weight: bold; margin-top: 4px; /* display: table; */ width: 100%; } table.expense_info th { font-size: 12px; font-weight: bold; color: #fff; text-transform: capitalize; } td { font-size: 13px; color: #fff; text-align: center; vertical-align: middle; } .expense_info.common_box_style.margintop { padding: 20px 13px; } table.cashflow { text-align: center; margin: 0 auto; color: #fff; text-transform: capitalize; } table.cashflow tr th { font-size: 19px; font-weight: normal; } table.cashflow tr td { font-size: 17px; font-weight: bold; } .roi { display: inline-block; background: #2bb673; width: 99%; text-align: center; color: #000; padding: 10px 0px 20px 0; margin-left: 6px; margin-top: 6px; } .discliamer_sec { background: #dfe9e9; display: inline-block; text-align: center; font-size: 9px; width: 100%; padding: 10px 0; line-height: 18px; margin-top: 6px; } .discliamer_sec h2 { color: #768293; } .footer_cright { background: #496bb3; text-align: center; font-size: 8px; color: #fff; padding: 1px 0; font-weight: 400; margin-top: 7px; display: inline-block; width: 100%; } @media print { .common_box_style, .roi, .discliamer_sec, .footer_cright, .top_header { background: !important; -webkit-print-color-adjust: exact; } } &lt;/style&gt; &lt;link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet'&gt; &lt;/head&gt; &lt;body&gt; &lt;div class='main_wrapper'&gt; &lt;div class='top_header'&gt; &lt;div class='left_top'&gt;&lt;p class='contact_person'&gt;Xyz xyz&lt;span&gt;xyz@xyz.com&lt;/span&gt;&lt;/p&gt;&lt;p class='contact_person right_person'&gt;Xyz xyz&lt;span&gt;xyz@xyz.com&lt;/span&gt;&lt;/p&gt;&lt;/div&gt; &lt;div class='right_top'&gt;";
      html +="&lt;img src='images/logo.png' /&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class='galleryimage_main'&gt; &lt;img src='https://drive.google.com/uc?export=view&amp;id="+file1+"' alt='Gallery Image Here' height='350' width='885'/&gt; &lt;/div&gt; &lt;div class='left_col'&gt; &lt;div class='property_address common_box_style margintop'&gt; &lt;h2&gt;PROPERTY ADDRESS&lt;/h2&gt; &lt;p id='address_line_1' class='address_line_1'&gt;4043 N RAVENSWOOD AVE,&lt;/p&gt; &lt;p id='address_line_2' class='address_line_2'&gt;CSUITE 316, HICAGO,&lt;/p&gt; &lt;/div&gt; &lt;div class='expense_info common_box_style margintop'&gt; &lt;h2&gt;EXPENSE INFORMATION&lt;/h2&gt; &lt;table id='expense_information' class='expense_info' cellpadding='3' cellspacing='1'&gt; &lt;tr&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;%of Rent&lt;/th&gt; &lt;th&gt;Monthly&lt;/th&gt; &lt;th&gt;Yearly&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class='exp_info_disc'&gt;Estimated Taxes:&lt;/td&gt; &lt;td&gt;-&lt;/td&gt; &lt;td&gt;345&lt;/td&gt; &lt;td&gt;777&lt;/td&gt; &lt;/tr&gt; &lt;td class='exp_info_disc'&gt;Estimated Insurance:&lt;/td&gt; &lt;td&gt;-&lt;/td&gt; &lt;td&gt;200&lt;/td&gt; &lt;td&gt;133&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class='exp_info_disc'&gt;Management Fee:&lt;/td&gt; &lt;td&gt;4&lt;/td&gt; &lt;td&gt;344&lt;/td&gt; &lt;td&gt;5200&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class='exp_info_disc'&gt;Vacancy Adjustment:&lt;/td&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;555&lt;/td&gt; &lt;td&gt;50&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class='exp_info_disc'&gt;Repairs &amp; Maintenance: &lt;/td&gt; &lt;td&gt;10&lt;/td&gt; &lt;td&gt;500&lt;/td&gt; &lt;td&gt;50&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;/tr&gt; &lt;tr&gt; &lt;/tr&gt; &lt;tr&gt; &lt;/tr&gt; &lt;tr is='total_exp' class='total_exp'&gt; &lt;td class='exp_info_disc'&gt;TOTAL EXPENSES:&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;343&lt;/td&gt; &lt;td&gt;342&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;/tr&gt;&lt;tr&gt; &lt;/tr&gt;&lt;tr&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div class='cashflow common_box_style margintop'&gt; &lt;h2&gt;CASH FLOW ESTIMATE&lt;/h2&gt; &lt;table id='cashflow' class='cashflow' cellpadding='3' cellspacing='5'&gt; &lt;tr&gt; &lt;th&gt;Per Month&lt;/th&gt; &lt;th&gt;Per Year&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;123&lt;/td&gt; &lt;td&gt;4533&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='right_col'&gt; &lt;div id='property_information' class='property_information common_box_style margintop'&gt; &lt;h2&gt;PROPERTY Information&lt;/h2&gt; &lt;ul&gt; &lt;li&gt;&lt;span&gt;List Price:&lt;/span&gt;&lt;span class='value_field'&gt;100&lt;/span&gt;&lt;/p&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;Rehab Costs:&lt;/span&gt;&lt;span class='value_field'&gt;100&lt;/span&gt;&lt;/p&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;Structure:&lt;/span&gt;&lt;span class='value_field'&gt;Single Family&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;Current Rent:&lt;/span&gt;&lt;span class='value_field'&gt;29&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul class='grpleft'&gt; &lt;li&gt;&lt;span&gt;Bedrooms:&lt;/span&gt;&lt;span class='value_field'&gt;100&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;Bathrooms:&lt;/span&gt;&lt;span class='value_field'&gt;100&lt;/span&gt;&lt;/p&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt;Square Footage:&lt;/span&gt;&lt;span class='value_field'&gt;100&lt;/span&gt;&lt;/p&gt;&lt;/li&gt; &lt;li&gt;&lt;span&gt; Current Status:&lt;/span&gt;&lt;span class='value_field'&gt;Rented and Performing &lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; &lt;p class='cash_prize'&gt;CASH PRICE&lt;span&gt;300&lt;/span&gt;&lt;/p&gt; &lt;/div&gt; &lt;div class='gallery_small_images'&gt; &lt;div class='gallery_small_image2'&gt; &lt;img src='https://drive.google.com/uc?export=view&amp;id="+file2+"' /&gt; &lt;/div&gt; &lt;div class='gallery_small_image3'&gt; &lt;img src='https://drive.google.com/uc?export=view&amp;id="+file3+"' /&gt; &lt;/div&gt;&lt;/div&gt; &lt;div class='roi' id='cash_on_cash'&gt; &lt;h2&gt;CASH-ON-CASH ROI&lt;/h2&gt; &lt;input type='text' value='1200' id='cash_roi_input'&gt;&lt;/input&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class='discliamer_sec'&gt; &lt;h2&gt;Information deemed reliabale but not guranteed. Images not to scale. Buyer responsible for &lt;br&gt;due diligence for all information provided and should conduct their own research.&lt;/h2&gt; &lt;/div&gt; &lt;div class='footer_cright'&gt; &lt;h2&gt;Copyright © High Return Real Estate LLC - 2017&lt;/h2&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;"; 
      var blob = HtmlService.createHtmlOutput(html);
      //Utilities.newBlob(html, "text/html", "text.html");
      Utilities.sleep(30000);
      blob = blob.getBlob();
      var pdf = blob.getAs("application/pdf");
      Utilities.sleep(30000);
      DriveApp.createFile(pdf).setName("text.pdf");
  }
  </code></pre>