Image disappears after printing on chrome - anyone know what's going on?

rconstantine

I have this image in a vue file:

<img
  alt="Sutter logo"
  src="../assets/SH Logo Blue.png"
  width="70px"
  height="70px"
  style="float: left; vertical-align: middle;"
/>

As you can see, there is nothing special. The image exists in the specified location, and appears when the page is loaded. However, once I print (which opens a new tab plus the print dialog) via this code in the ‘methods’ section:

onPrint () {
  this.onGenerate()
  let x = window.open()
  x.document.open()
  x.document.write('<html><head><title>' + document.title + '</title>')
  /* x.document.write('<STYLE type="text/css">\n' +
    ' </STYLE>') */
  x.document.write('</head><body >')
  x.document.write(document.getElementById('printSheet').outerHTML)
  x.document.write('</body></html>')
  x.document.close()
  x.focus()
  x.print()
  x.close()
}

While both tabs and the dialog are open, I can switch between tabs and see that all is well. It is when I close the dialog (which also closes the new tab) that the image disappears on the original tab. I must browse to another page and come back for the image to reappear.

Any ideas why this is happening?

rconstantine

I see that the generated HTML is this:

<img data-v-5b338e76="" alt="Sutter logo" src="img/SH Logo Blue.png" width="70px" height="70px" style="float: left; vertical-align: middle;">

It stays the same after the previously described open and close of the new tab. However, no image. Hovering over the image path in the dev tools window does show the image.

I’m baffled and stuck!

No More Posting New Topics!

Image disappears after printing on chrome - anyone know what's going on?