Google Chrome Not Showing Image in Print Preview
The issue here is javascript not giving the DOM enough (any) time to load / render the image once it has the src set.
You need to allow time for the browser to load / render (from cache or otherwise) the image, you can do so by setting a setTimeout to delay the printing from the content being set.
An example for this specific question would be:
var newWindow = window.open('', '', 'width=100, height=100'),document = newWindow.document.open(),pageContent = '<!DOCTYPE html>' + '<html>' + '<head>' + '<meta charset="utf-8" />' + '<title>Inventory</title>' + '<style type="text/css">body {-webkit-print-color-adjust: exact; font-family: Arial; }</style>' + '</head>' + '<body><div><div style="width:33.33%; float:left;"><img src="img/Logo_big.png"/></body></html>';document.write(pageContent);document.close();newWindow.moveTo(0, 0);newWindow.resizeTo(screen.width, screen.height);setTimeout(function() { newWindow.print(); newWindow.close();}, 250);The lower you set the setTimeout, the less time the browser will have to load the image so you will need to adjust this and account for slower internet connections / browsers where applicable.
After a deep research I found a solution for showing the images and background in google chrome print preview:
function PopUp(data) { var mywindow = window.open('','','left=0,top=0,width=950,height=600,toolbar=0,scrollbars=0,status=0,addressbar=0'); var is_chrome = Boolean(mywindow.chrome); mywindow.document.write(data); mywindow.document.close(); // necessary for IE >= 10 and necessary before onload for chrome if (is_chrome) { mywindow.onload = function() { // wait until all resources loaded mywindow.focus(); // necessary for IE >= 10 mywindow.print(); // change window to mywindow mywindow.close();// change window to mywindow }; } else { mywindow.document.close(); // necessary for IE >= 10 mywindow.focus(); // necessary for IE >= 10 mywindow.print(); mywindow.close(); } return true;}Thanks to Anand Deep Singh post that helped with a part of the code.
You can add the following in your css for media print:
img { -webkit-print-color-adjust: exact;}