使用ngx-print进行图像打印时出现问题

Question

无法使用ngx-print打印图像。我不确定我在做什么错。

HTML

{
    "data": {
        "name": "et",
        "description": "Qui sit perspiciatis dolores repellendus illum suscipit molestiae. Eius maxime ipsam ipsum est. Reiciendis ut a quos ut soluta repudiandae distinctio animi.",
        "price": 651,
        "stock": 9,
        "rating": 0,
        "href": {
            "reviews": "http://localhost:8000/api/products/4/reviews"
        }
    }
}

---

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

但是图像在屏幕上可见，但在打印预览部分中不可见。

Answer 1

您必须使用绝对路径，而不是相对路径

即您的路径应为

“ http://localhost:3000/assets/images/print-logo.png” 不是“ print-logo.png”

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

例如，可以使用当前的基本网址（“ http://localhost:3000”

让x = window.location.origin;

Answer 2

我已经遇到了这个问题，我已经注意到在最后一个页面中，可打印页面经过检查后，目录不是正确的页面，他正在添加我正在从中打印页面的目录，因此如何解决呢？我刚刚添加了DomSanitizer。

对于您而言，我认为这样的方法应该起作用：（请注意，我在链接的开头添加了/）

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

将消毒剂添加到构造函数中：

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

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