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.
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;
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) {}
}
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.
