5

Using Windows 7. The photos(images) are not appearing in the Print preview in chrome browser - version 36.0.1985.125m onwards. The maps works fine. I have attached a sample. This is happening in the Chrome alone.

Note : Works fine with CTRL + P.

Please advise, thanks.

enter image description here

BumbleBee
  • 151
  • 1
  • 1
  • 2
  • Not sure what you're asking here. CTRL+P opens the print preview dialog from which you can select your printer or even print to a .pdf. – Sarge Aug 13 '14 at 00:44
  • Right-click on the image that's causing problems, choose `Inspect Element`. A pane will appear. On the left hand side, a line will be highlighted. Right-click on that line, choose `Copy`. Edit your question and add the lines(s) from the clipboard. That will let us work out exactly what technique is being used to display the image and diagnose farther. – Basic May 10 '15 at 02:42
  • Do the images appear on the print out? – Burgi May 31 '16 at 08:06

6 Answers6

7

After Pressing Ctrl+p or giving print in Chrome Select the Checkbox Background colors and images under the Options.

enter image description here

A. Prasad
  • 811
  • 3
  • 14
  • 30
3

A very simple solution is this one (and it works with firefox and Chrome/chromium):

Open a new tab. Type

data:text/html, <html contenteditable>

in the address-bar.

Thus you can use the browser as a text-editor. Best save the tab as a bookmark (see https://www.schieb.de/720201/firefox-oder-chrome-als-text-editor-benutzen).

Then copy the complete page you want to save to the editor-page. It copies all pictures together with the text. Then it´s really simple to print (as .pdf-file) the page from the editor-page.

Rosika
  • 131
  • 2
1

Make sure the image is cached before issuing the print command, especially when using document.write

The simplest way I got around the problem in Chrome was to add this to the page I want to print: 

<div><img src="image_that_does_not_show_in_preview.png" style="display:none;"/></div>

This will cache the image and ensure it shows up in Chrome's print preview dialog.

Martin Carstens
  • 241
  • 2
  • 3
  • Helped me a lot. My issue was image on page has additional get param, i.e. ``, but printable version has image without param, i.e. ``. So I simly added `` and it works now. – userlond Aug 02 '16 at 09:35
  • removed the whole div completely in my case – GustavZ May 13 '20 at 09:54
0

Use CSS to apply the display style to the img. either inline or specific enough that the print preview's applied display:none; is overriden.

To clarify add style="display:block;" to an <img [insert style here] src"/i-am-an-image.jpg"/> element

That solved it for me, hope this helps

David Tattersall
  • 1
0

I had the same problem and it was driving me crazy. For me, it turned out that Chrome was removing images that were touching or crossing the "invisible" margin, as per the margin settings.

Setting the margin to "Minimal" or "None" made the images appear.

Dave
  • 101
  • 2
-1

Just add the below styles to make it work img { max-width: 100%; height: auto; }

Its the width of the image being set to 0 in the print which is causing the issue.

Let me know if this works for you.

Venkatesh Gaurav
  • 1