CODEWITHSUNDEEP
htmlcssangulartypescript
Aymen TAGHLISSIA
Aymen TAGHLISSIA

Reputation: 1915

Images not displaying when print using ngx-print library

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

enter image description here

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

enter image description here

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 :

enter image description here

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

enter image description here

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 ?

Upvotes: 1

Views: 2333

Answers (2)

sabri03
sabri03

Reputation: 81

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

Upvotes: 1

Maxim Mazurok
Maxim Mazurok

Reputation: 4128

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

Upvotes: 2

Related Questions