Trouble printing images loaded from URL

[MrG4dget]

Hi guys!

Not sure if anyone can reproduce this, but somehow I'm running into trouble when adding images from a URL to the Print skeleton.
I use a global config (Checkbox) no show/hide the image. In the preview the image is shown just fine. However the print itself shows no image. Other image elements (Icons and frame) are printing fine. Also using the "Save Image" button does not show the added image.

Expected Output

Output I got:

But when I edit the Template and load the data Skeleton of the same item, it prints fine as long as I load the data skeleton of the same item. If I use the default (last used entry) in the edit mode, it gives me the error:

Error: html to image rendering failed: png: invalid format: invalid image size: 0x0

Re-loading the item in the "Data Skeleton" page solves that problem and it prints the image just fine.

I added some image filtering options so that the output is kind of usable (values can be changed via global config). Maybe someone else needs this, so I'm posting my print template here.

Print Template

Print Template

<style>
    @font-face {
        font-family: "nodesto-condensed";
        src: url("/proxy/https://github.com/jonathonf/solbera-dnd-fonts/raw/master/Nodesto%20Caps%20Condensed/Nodesto%20Caps%20Condensed.otf") format("opentype");
        font-weight: normal;
    }
    @font-face {
        font-family: "Scaly Sans";
        src: url("/proxy/https://github.com/jonathonf/solbera-dnd-fonts/raw/master/Scaly%20Sans/Scaly%20Sans.otf") format("opentype");
        font-weight: normal;
    }
    .CardFront {
        width: auto;
        border-radius: 8px;
    }
    .CardContent {
        padding: 10px 10px 16px;
        font-family: "Scaly Sans", serif;
        font-style: normal;
        font-weight: 300;
    }
    .CardContent hr {
        margin: 0;
        height: 3px;
    }
    .Title {
        padding: 2px 8px;
        background-color: #e8ebec;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        font-size: 2rem;
        line-height: 2rem;
        font-family: "nodesto-condensed", serif;
        font-weight: normal;
        font-style: normal;
        text-transform: uppercase;
        text-align: center;
    }
    .Subtitle {
        padding: 4px;
        text-align: center;
        color: #e8ebec;
        font-size: 1.5rem;
        line-height: 1.5rem;
    }
    .DetailsContainer {
        overflow: auto;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    .DetailsContainer :first-child {
        padding-top: 8px;
    }
    .DetailsContainer :last-child {
        padding-bottom: 8px;
    }
    .DetailsBlock {
        padding: 3px 8px;
        background-color: #e8ebec;
        font-size: 1.7rem;
        line-height: 1.7rem;
    }
    .CardFooter {
        margin-top: 4px;
        display: flex;
        justify-content: space-between;
        color: #e8ebec;
        font-size: 1.5rem;
        line-height: 1.25rem;
        font-weight: bold;
    }
    .Category {
        font-size: 2.9rem;
        line-height: 2.9rem;
        font-family: "nodesto-condensed", serif;
        font-weight: normal;
        font-style: normal;
        text-align: center;
    }
    .Cost {
        font-size: 1.9rem;
        line-height: 2.9rem;
        font-family: "nodesto-condensed", serif;
        font-weight: normal;
        font-style: normal;
        text-align: center;
    }
    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
    }
    .Avatar {
        font-size: 1.9rem;
        line-height: 2.9rem;
        font-family: "nodesto-condensed", serif;
        font-weight: normal;
        font-style: normal;
        text-align: center;
    }
    .FileterdImage {
        -webkit-filter: grayscale(200%) contrast(200%) brightness({{config.brightness}}%);
        filter: grayscale(200%) contrast(200%) brightness({{config.brightness}}%);
    }
    img {
        -webkit-filter: grayscale(200%) contrast(200%) brightness({{config.brightness}}%);
        filter: grayscale(200%) contrast(200%) brightness({{config.brightness}}%);
    }
</style>
{% set color = "black" %}
<div class="CardFront" style="background-color: {{ color }}">
    <div class="CardContent">
        <div class="Title">
            <img src="{{ images[(it.dndbeyond.filterType+".png")] }}" alt="" width="30"> {{ it.name }}
        </div>
        <div class="Subtitle">{{ it.dndbeyond.type+" - " if it.dndbeyond.type}} {{ it.Item.system.rarity | capitalize }} {{ "("+it.requires_attunement+")" if it.requires_attunement }}</div>
        <div class="DetailsContainer">
            <div class="DetailsBlock">
                {{ it.desc | replace(r/\*\*([^\*]*)\*\*/g, '<strong>$1</strong>') | replace(r/_([^_]*)_/g, '<em>$1</em>') | replace(r/\n[\*-] /g, '\n• ') | replace("@Compendium[dnd5e.rules.w7eitkpD7QQTB6j0]","") | safe }} {% if
                config.showImage %}
                <img src="{{it.dndbeyond.avatarUrl}}" alt="" class="center" />
                {% endif %}
            </div>
        </div>
        <div class="CardFooter">
            <div class="Category">{{ it.type }}</div>
            <div class="Cost">
                {% if it.weight %}
                <img src="{{ images[('scale.png')] }}" alt="" width="30" />
                {{ (" "+it.weight+"lbs" if it.weight)+(" " if it.price)}} {% endif %} {% if config.value_overwrite > 0 %} {{ "Value: "+config.value_overwrite+"Gp" if config.value_overwrite}} {% else %} {{ "Value: "+it.price+"Gp" if
                it.price}} {% endif %}
            </div>
        </div>
    </div>
</div>

[MrG4dget]

I'm suspecting that there might be an issue with my use of global configs. it looks as if changing them, does not lead to the values being applied correctly.

[BigJk]

Found the issue. The global config wasn't properly applied when the final printing happened. A new version with the fix will be available in a few minutes. It would be great if you could verify that it works so I can close the issue and thanks a lot for bringing this up. Feel free to open more issues if you find any other bugs! 😄

[MrG4dget]

That seems to solve the issue! Awesome work!