Problem with image printing using ngx-print

Question

Image is not getting printed with ngx-print. I am not sure what am I doing wrong here.

HTML

<button  type="button" printTitle="PrintVoucher" [useExistingCss]="true" 
                                        printSectionId="printVoucher" ngxPrint>
                                        Print </button>

---

<div row id="printVoucher" >
 <img  src="assets/images/logo.png">
</div>

However the image is visible on the screen , but not visible in the print preview section.

Answer 1

you have to use absolute path , Not relative path

ie your path should be for example

" http://localhost:3000/assets/images/print-logo.png " not "print-logo.png"

to know the difference between relative and absolute path check this link

to get your current base Url for example (" http://localhost:3000 ") you can use

let x = window.location.origin;

Answer 2

I already faced this problem , i've noticed that in the last one , the printable page , after inspecting it,the directory is not the right one , he was adding the directory of the page that i was printing from , so how to fix this ? i just added a DomSanitizer .

in your case, I think that something like this should work: ( notice that i added / at the begining of your link )

<img [src]="sanitizer.bypassSecurityTrustUrl('/assets/images/logo.png')" />

Add sanitizer to you constructor :

 import { DomSanitizer } from "@angular/platform-browser"; 

 export class AppComponent {
      constructor(private sanitizer: DomSanitizer) {}
    }

Answer 3

I've faced the same problem before, I only did the following:

image path was: assets/img/logo.png changed it into: /assets/img/logo.png

Just added a / at the beginning of the path and it worked.