Images not displaying when print using ngx-print library

Question

As you can see , the images are shown correctly in the screen :

but when i try to print this container using ngx-print it's not displaying correctly :

Very important : I have no control over the images because they come from the back-end.

HTML :

<div class="hover-div">
    <button mat-button class="title-div" printSectionId="card-container" 
         printTitle="professionalcard" [useExistingCss]="true" ngxPrint>
            <div fxLayout="row">
                <mat-icon class="preview-icon">print</mat-icon>
                <div>print</div>
            </div>
     </button>
</div>

HTML of images :

<div class="simple-image" *ngIf="cardModel[r.content].value">
    <img [src]="cardModel[r.content].value"
        class="image-holder1">
</div>

Here is the result when i inspect the img in the page :

and this one , when i inspect the page viewer when printing :

i've noticed that in the last one , the link is not the right one , he is adding the directory of the page that i'm printing from , so how to fix this ?

It's probably because you are using background images. Browers do not print them by default. Here are some workarounds: https://stackoverflow.com/questions/6670151/how-can-i-force-browsers-to-print-background-images-in-css — David, Apr 16 '20 at 19:27
no , it's not a background , it's an `` , by the way .. i already set `-webkit-print-color-adjust` to `exact` — Aymen TAGHLISSIA, Apr 16 '20 at 19:51
Are there any errors in chrome console. Alternatively, right click on the image > inspect > browse to the image URL > copy it > paste it to new tab and check if the image is loading. If not issue with image path !! — mightyteja, Apr 17 '20 at 08:25
no , the images are loading correclty, links of the images work when i open them in a new tab — Aymen TAGHLISSIA, Apr 17 '20 at 08:39
Could you add `{{cardModel[r.content].value}}` next to the image to make sure this value is set with thee correct value when printing? — David, Apr 17 '20 at 09:23
if you add `{{ }}` , then you need to get off the binding `[ ]` , it comes back to the same result . the image is displaying very well — Aymen TAGHLISSIA, Apr 17 '20 at 11:10
a quick search lead me to this.. https://stackoverflow.com/questions/56694343/problem-with-image-printing-using-ngx-print. Kindly try updating the path — mightyteja, Apr 17 '20 at 12:32
the problem is that i'm using a proxy to redirect the endpoint , so even if i add localhost:4200 it won't work — Aymen TAGHLISSIA, Apr 17 '20 at 12:36

score 2 · Accepted Answer · answered Apr 17 '20 at 12:37

2

According to this answer and this GitHub issue comment, you have to use absolute path for the image.

So, in your case, I think that something like this should work:

<img [src]="sanitizer.bypassSecurityTrustUrl('/' + cardModel[r.content].value)" />

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

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

answered Apr 17 '20 at 12:37

Maxim Mazurok

3,856
2
22
37

I already used the stainizer, but I never thought of using it in such a case !! now it's working great ^^ , thank's !! – Aymen TAGHLISSIA Apr 17 '20 at 12:57
I'm glad that helped :) – Maxim Mazurok Apr 17 '20 at 13:01

score 1 · Answer 2 · answered Apr 17 '20 at 12:54

1

you can add let window.location.origin to make it an absolute path , then you'll not have this problem

answered Apr 17 '20 at 12:54

sabri03

81
4

Thank's , its working like that , but i prefer not to use an `absolute path`. – Aymen TAGHLISSIA Apr 17 '20 at 12:55

Images not displaying when print using ngx-print library

2 Answers2