CSS Page Margin At Rule Image

Question

Is it possible to add an image to a page margin at rule? I have a situation where we utilize PagedJS polyfill to convert html from a text editor element into a printable page. This was done to facilitate page counts and special text in the printed header/footer. This is controlled via the @page and @top-left/@bottom-left/@bottom-right css at rules.

Recently it was requested to add an image to the header. I can't seem to make this happen, and I'm unsure where my problem might be.

The current CSS in use is as follows:

<style>
    @page{
        @top-left {
            content: headerData
        }
        @bottom-right {
            content: "Page: " counter(page) " of " counter(pages)
        }
        @bottom-left {
            content: footerData
        }
    }
</style>

'headerData' and 'footerData' are dynamic values provided by users, and are added by the server during page load. PagedJS then utilizes this to create the printable page. Here's an example of the current output.

The JS utilized is nothing special. Here it is in its entirety:

window.PagedConfig = {
    auto: false,
};

window.onload = function() {
    window.PagedPolyfill
        .preview(document.getElementById("editorContent").innerHTML, undefined, document.getElementById("renderContent"))
        .then(() => {
            document.getElementById("editorContent").remove();
            window.print();
        });
}

It's trying to add an image to the header that isn't working. I attempted to use Base64 of the specified image, but this just displays the actual text, even if I enter it manually.

<style>
    @page{
        @top-left {
            content: "data:image/png;base64, iVBORw0KGgo...."
        }
        @bottom-right {
            content: "Page: " counter(page) " of " counter(pages)
        }
        @bottom-left {
            content: footerData
        }
    }
</style>

I also tried to use the URL function to serve up an image, which I've done in plenty of other locations (though never before with the at rules). Nothing is displayed in the margin location.

<style>
    @page{
        @top-left {
            content: url('../images/pic10.png');
        }
        @bottom-right {
            content: "Page: " counter(page) " of " counter(pages)
        }
        @bottom-left {
            content: footerData
        }
    }
</style>

I also tried to utilize the background-image property, but that isn't working either.

<style>
    @page{
        @top-left {
            background-image: url('../images/pic10.png');
        }
        @bottom-right {
            content: "Page: " counter(page) " of " counter(pages)
        }
        @bottom-left {
            content: footerData
        }
    }
</style>

Is it possible to have an image in the page margin? I'm not married to accomplishing this with purely CSS, but I'm not sure how else I could approach it, given the use of PagedJS.

---

EDIT

I've implemented a hacked work-around that does the job.

window.onload = function() {
    window.PagedPolyfill
        .preview(document.getElementById("editorContent").innerHTML, undefined, document.getElementById("renderContent"))
        .then(() => {
            document.getElementById("editorContent").remove();
            let printLogoElement = document.createElement("img");
            printLogoElement.setAttribute("src", headerLogo);
            printLogoElement.setAttribute("class", "printLogo");
            document.getElementsByClassName("pagedjs_margin-top-left-corner-holder")[0]
                .appendChild(printLogoElement);
            setTimeout(function(){
                window.print();
            }, 100);
        });
}

Again, 'headerLogo' is provided by the server during page load, and is the base64 I attempted earlier. printLogo is simple auto-margin CSS for centering. And the timeout is due to the window.print being invoked before the image element is actually appended. A slight delay is needed so that the element is actually present in the print preview.

But I look at this as being a less than ideal implementation. Surely there's a better way I could accomplish this?