Images not showing when rendering PDF with twig in Symfony

Question

When generating a PDF using mPDF (containing images), no images will show. The text displays just fine. For some reason it does add several blank pages to the PDF. Even though it has a footer text set for every page, these are still blank.

Tried to enable $mPdf->showImageErrors, this does not give any errors, also tried to search the error log. There are no errors thrown. Tried to catch any MpdfException. But none are thrown.

{twig tempalte}

<html>
<head>
    <style>
        body {
            font-family: "Times New Roman", Times, serif;
            font-size: 10px;
            line-height: 14px;
        }

        thead {
            font-weight: bold;
        }

        table {
            margin: 15px 0;
            padding: 0;
        }

        td {
            width: 165px;
        }

        tr {
            margin: 10px 0;
        }

        td table {
            border-spacing: 0;
        }

        th {
            text-align: left;
        }

        .container {
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }

        .row {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }

        .full-table td {
            width: 100%;
        }
    </style>
</head>
<body>
<div class="row">
        <table class="full-table">
            <tr>
                <th>Screenshot</th>
            </tr>
            <tr>
                <td><img src="{{ asset('/images/path/to-image.png') }}"/></td>
            </tr>
        </table>
    </div>
    <div class="row">
        <table class="full-table">
            <tr>
                <th>Screenshot</th>
            </tr>
            <tr>
                <td><img src="{{ asset('/images/path/to-second-image.png') }}"/></td>
            </tr>
        </table>
    </div>
</body>
</html>

$mPdf = new Mpdf();
$template = {twig template}
$filePath = '{var/location}';

$mPdf->watermarkImageAlpha = 1;
$mPdf->watermark_size = 'D';
$mPdf->watermark_pos = [107, 0];
$mPdf->showWatermarkImage = true;
$mPdf->watermarkImgBehind = true;

$mPdf->WriteHTML($template);
$mPdf->Output($filePath, Destination::FILE);

Expected for it to display images and background image, none are showing.

I would imagine that the asset twig function produces the paths for web, however, Mpdf doesn't know or care about paths for the web and only cares about paths that mean something in the filesystem. Just because Mpdf uses HTML as it's language to describe pdf contents, doesn't mean it employs a web browser to actually load those... meaning, you probably have to find/write a function different from asset to get the correct path to your images. — Jakumi
– Jakumi, Commented Jul 24, 2019 at 13:03
And it's easy enough to find out for sure whether or not that is the case. Replace one of those instances with the full path to the image and see if it works (it probably will). — Dave
– Dave, Commented Jul 24, 2019 at 13:07
also, I'm pretty sure Mpdf doesn't understand twig templates. you have to render it into "pure" html. — Jakumi
– Jakumi, Commented Jul 24, 2019 at 13:08
@Jakumi I did render them prior to passing it to mpdf. But it seems that asset does not work. When I changed it to full path it worked. Thanks for the help! — ToluTourialai
– ToluTourialai, Commented Jul 24, 2019 at 14:40

ToluTourialai · Accepted Answer · 2019-07-24 14:37:55Z

1

@Jakumi and @Dave were right. Tried full paths and that seemed to work just fine. The examples I saw online also used relative paths from the the template to the images, figured that this would work as well.

Fix: use full paths.

answered Jul 24, 2019 at 14:37

ToluTourialai

314 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rzp789 · Accepted Answer · 2023-06-26 12:31:43Z

-1

Need to use absolute_url and asset in twig.

<img src="{{ absolute_url(asset('invitation/logo_without_border.png', 'images')) }}" width="250px" height="70px">

answered Jun 26, 2023 at 12:31

rzp789

11 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Images not showing when rendering PDF with twig in Symfony

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related