Изображения не отображаются при печати с использованием библиотеки ngx-print

Question

Как видите, изображения правильно отображаются на экране:

, но когда я пытаюсь напечатать этот контейнер, используя ngx-print отображается неправильно:

Очень важно: Я не могу контролировать изображения, потому что они исходить из бэк-энда.

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 изображений:

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

Вот результат, когда я проверяю img на странице:

и это, когда я проверяю просмотрщик страниц при печати:

Я заметил, что в последнем случае ссылка неправильная, он добавляет каталог страницы, с которой я печатаю, так как это исправить?

Answer 1

Согласно этому ответу и этому комментарию к выпуску GitHub, вы должны использовать абсолютный путь к изображению.

Так что, в вашем случае, я думаю, что как то так должно работать:

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

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

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

Answer 2

вы можете добавить let window.location.origin, чтобы сделать его абсолютным путем, тогда у вас не будет этой проблемы