[BUG]: Image fails to render

[Us3r-gitHub]

Describe the bug
I recently discovered this library and wanted to try it out. I looked at the provided playground, but I encountered an issue where the image is not rendering correctly.

Screenshots
playground

[siaikin]

Thank you very much for the bugs you found.

This is an issue with the example on stackbilz, I'll look at it later. Before that, you can check out the documentation https://vue-to-print.netlify.app/

[siaikin]

@Us3r-gitHub HI, you can access example by https://codesandbox.io/p/devbox/github/siaikin/vue-to-print-example?embed=1

[Us3r-gitHub]

Thanks for the fix!

Is StackBlitz a known issue for this?

[siaikin]

This should be an issue with Chrome.

Check out this w3c/ServiceWorker#765 and this w3c/ServiceWorker#765 (comment). In simple terms, service workers can't intercept requests for iframes in Chrome, even if they're from the same origin.

vue-to-print uses an iframe to print partial html, and Stackblitz uses a service worker to intercept requests. These two points meet the trigger conditions of the above question. So you can see that images loaded from "local" in StackBlitz can't be displayed (because requests for "local" images can't be intercepted).

CodeSandbox doesn't use service workers, so I switched to him.

Tested and found that StackBlitz's example works fine on Firefox and Safari.

这应该是 Chrome 的问题。

查看这个 w3c/ServiceWorker#765 和 这个 w3c/ServiceWorker#765 (comment) 。简单来说，在 Chrome 中 Service Worker 无法拦截 iframe 的请求（即使是同源的）。

vue-to-print 使用 iframe 来实现打印 html 的局部内容，并且 Stackblitz 使用 Service Worker 拦截请求。这两点满足和上述问题的触发条件。所以你可以看到在 StackBlitz 中从“本地”加载的图片无法显示（因为无法拦截到“本地”图片的请求）。

CodeSandbox 不使用 Service Worker ，因此我切换到他。

经过测试，StackBlitz 的示例在 Firefox 和 Safari 上能够正常工作。