WeasyPrint does not show images in PDF

[Thorbenl]

Hey.
I hope there is a way around my current issue:

Pre-knowledge

• HTML template
• images served via third party (imgix), so weasy needs to download them from there
• all images show up in the pdf correctly, but two
• the uploaded images very from size, format etc, but imgix API converts formats them all correctly

HTML template

                    <div class="signature__wrapper">
                        {% if signature_image %}
                            <img src="{{ signature_image.url }}"/>
                        {% else %}
                            <strong class="signature__placeholder">{{ translations.signature.not_signed }}</strong>
                        {% endif %}

                    </div>

Problem

The PDF does not contain two of my images, but all the others.
The html template, which is used as a base for the PDF, is a Jinja2 html. template. It is used both the html preview (just rendering the html template) and making the pdf. The initial images are pngs, pixbuff and all other stuff is installed correctly

Suspicion

Since its only a couple of images that arent working, and they are manually generated (signatures for a contrat), I assume there might be something wrong with the image itself.

Code

I have tried setting up logs, to see if there is a potential issue with downloading the image.

def generate_pdf(report: Report, output_file: IO):
    render_template_to_pdf(
        'report.html'
        output_file=output_file,
        context=report
    )
    output_file.seek(0)

def render_html_to_pdf(html: str, output_file: IO, base_url=None):
    import weasyprint
    import logging
    logger = logging.getLogger('weasyprint')
    pdf = weasyprint.HTML(string=html, base_url=base_url)
    pdf.write_pdf(target=output_file, optimize_images=False)
    logger.addHandler(logging.FileHandler(f"{os.path.abspath(os.path.dirname(__file__))}/weasy.log"))

But nothing of error shows up in here.

Images rendered in the html, using the html template:

Images rendered in the pdf, using the html template:

---

My main question is: how can I debug further? I might want to see if there is an issue with downloading/inserting the image.. or if the image has a wrong alpha channel.. or whats wrong

Specs

python version: 3.8.10
weasyprint version: 52.5
django 3.2.6

[Thorbenl]

Long story short: there is a problem with flexbox. My image was inside a flexbox container and would never display correctly. I think its weird, that the logs didnt show anything?

                        <div class="signature__wrapper">
                            <img src="{{ signature_image.url }}">
                        </div>

and

        .signature__wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
        }

removing the display: flex; fixed this issue..

[liZe]

Thanks for the report.

I can reproduce your problem, with a width set to a percentage for the image. Is that what you have too?

If that’s your case too, then it’s a duplicate of #656 (see #656 (comment)).

[Thorbenl]

Thanks for the report.

I can reproduce your problem, with a width set to a percentage for the image. Is that what you have too?

If that’s your case too, then it’s a duplicate of #656 (see #656 (comment)).

Yes, this is what I have too. Sorry! I should have thouroughly read the other comments and issue before making my own. My apologies. This issue here can be closed. :)

[liZe]

Yes, this is what I have too. Sorry! I should have thouroughly read the other comments and issue before making my own. My apologies. This issue here can be closed. :)

No problem, that was not obvious at all, and I’ve spent 5 minutes finding the right issue myself 😉.