Images used in headerHTML appear to not load

[Roye7777777]

I am successful in rendering a PDF with headers and footers while retaining the originally used markup of elements (with background colors etc.) by emulating a screen instead of defaulting to print. For that, I use the following:

$pdfContent = Browsershot::html(view('path.to.view'))
        ->setIncludePath(config('browsershot.include_path'))
        ->emulateMedia('screen')
        ->waitUntilNetworkIdle()
        ->showBrowserHeaderAndFooter()
        ->headerHtml(view('path.to.header'))
        ->footerHtml(view('path.to.footer'))
        ->format('A4')
        ->showBackground()
        ->pdf();

return response($pdfContent)->withHeaders(['content-type'=>'application/pdf']);

In the headerHTML, I primarily apply a separate view, containing most importantly this:

<div class=" (...) " style=" (...) ">
    <img src="https://via.placeholder.com/230x50" alt=" (...) " style=" (...) ">
</div>

What I notice is that images do not load here. It's instead the alt-text that is being displayed together with the famous broken image icon. Is this expected behaviour, or is this actually supposed to work? Same goes for webfonts.

[edcoreweb]

@Roye7777777

This is because how chrome handles headers and footers in print preview.

Had the same issue and went down the rabbit hole into the chromium source code, and the header and footer are basically strings in which some replaces are made for page numbers. No requests or js scripts are evaluated.

Unless you intend to change the source code and build your own version of chromium, only simple text/html will work.

In the end I used the paged.js polyfill (for CSS3 print module) and managed to do custom headers and footers.

[Roye7777777]

@edcoreweb Thanks. Eventually I 'solved' this by using an inline SVG (it was a logo, so it could be replaced by such) as a replacement for images. That worked as well.