image in mPdf not showing in server though works well in localhost

Question

In WordPress project I am using mPDF to generate pdf and send it as attachment via Mandrill. The only problem is Images aren't showing in pdf rather a square box with red cross is showing. But it works perfectly fine in localhost. Code:

$html = create_html($quote);
function create_html($quote = NULL) {
    $logo = get_field( 'logo', 'option' );
    $image = get_field( 'image', 'option' );
    $title = get_field( 'title', 'option' );
    $sub_title = get_field( 'sub_title', 'option' );
    $content_image = get_field( 'content_image', 'option' );
    $content = get_field( 'content', 'option' );
    $html = '<!DOCTYPE html><html>';
        $html .= '<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>';
        $html .= '<style>
                    body {
                        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                        font-size14px;
                        line-height:1.5;
                        font-weight: normal;
                    }
                    .container {
                        max-width: 690px;
                        margin: 0 auto;
                    }
                    figure{
                        padding:0;
                    }
                    .mailContent {
                        float: left;
                        width: 100%;
                    }
                    .top-mail.centerAlign {
                        padding-top: 30px;
                        padding-bottom: 20px;
                        float: left;
                        width: 100%;
                    }
                    .mid-mail.centerAlign {
                        padding-top: 20px;
                        padding-bottom: 10px;
                        float: left; 
                         width: 100%; 
                    }
                    figure.mail-fig {
                        padding-bottom: 20px;
                        float: left;
                        width: 100%;
                    }
                    .mailContent h1 {
                        color:#4A5467;
                        font-size: 85px;
                        padding-top: 20px;
                        padding-bottom: 30px;
                        float: left;
                        width: 100%;
                        font-weight: normal;
                       font-family: "CycloneBackground";
                    }
                    .mailContent .highlight-text {
                        padding-bottom: 30px;
                        max-width: 650px;
                        margin: 0 auto;
                        font-size: 22px;
                        line-height: 1.5;
                    }
                    .bot-mail {
                        border-top: 1px solid #eee;
                        // margin-top: 10px;
                        padding-top: 40px;
                        padding-bottom: 50px;
                        float: left;
                        width: 100%;
                    }
                    .blue-logo{
                        margin-right: 80px;
                    }
                    .bot-mail p, .top-mail-text p{
                        font-size: 16px;
                        overflow: hidden;
                    }
                    .wrapper690, .wrapper400{
                        max-width: 690px;
                        margin: 0 auto;
                    }
                    .wrapper400{
                        max-width: 400px;
                    }
                    img.db-comma {
                        padding-top: 10px;
                        padding-bottom: 12px;
                    }
                    .mailContent2 .top-mail.centerAlign {
                        padding-bottom: 30px;
                    }
                    .centerAlign{
                        text-align: center;
                    }
                    .fLeft{
                        float:left;
                    }
                </style>';
        $html .= '</head>';
        $html .= '<body>';
            $html .= '<div class="container"><div class="row"><div class="col-sm-12">';
            if(!empty($quote)) {
                $html .= '<div class="mailContent wrapper690 mailContent2">';
                $html .= '<div class="top-mail centerAlign">';
                    $html .= '<img src="'.$logo.'" alt="" class="fLeft">';
                    $html .= '<div class="wrapper400 fRight top-mail-text">';
                        $html .= '<img src="'.get_stylesheet_directory_uri().'/assets/images/db-comma.PNG" alt="double comma" class="db-comma">';
                        $html .= $quote;
                    $html .= '</div>';
                $html .= '</div>';
            } else {
                $html .= '<div class="mailContent wrapper690">';
                $html .= '<div class="top-mail centerAlign"><img src="'.$logo.'" alt=""></div>';
            }
            $html .= '<div class="mid-mail centerAlign">';
                $html .= '<figure class="mail-fig"><img src="'.$image.'" alt=" group"></figure>';
                if(!empty($title)) {
                    // $html .= '<h1>'.$title.'</h1>';
                      $html .= '<h1>test</h1>';
                }
                if(!empty($sub_title)) {
                    $html .= '<p class="highlight-text">'.$sub_title.'</p>';
                }
            $html .= '</div>';
            $html .= '<div class="bot-mail">';
                if(!empty($content_image)) {
                    $html .= '<img src="'.$content_image.'" alt=" logo blue" class="fLeft blue-logo">';
                }
                if(!empty($content)) {
                    $html .= $content;
                }
            $html .= '</div>';
            $html .= '</div>';
            $html .= '</div></div></div>';
        $html .= '</body>';
    $html .= '</html>';

    return $html;
}
$mpdf = new mPDF(); 
$mpdf->SetDisplayMode('real');
$html = mb_convert_encoding($html, 'UTF-8', 'UTF-8');
$mpdf->WriteHTML($html);
ob_clean();
$path_certificate = ABSPATH."certificates/";
$certificate_filename = 'Gåvobevis_'.$_SESSION['first_name'].'_'.$_SESSION['last_name'].'_'.uniqid(); 
$certificate_filename = $certificate_filename.'.pdf';
$mpdf->Output($path_certificate.$certificate_filename, 'F');

mail sending:

$attachment = file_get_contents($path_certificate.$certificate_filename);
$attachment_encoded = base64_encode($attachment);
$params = array(
                'html' => $message,
                "text" => null,
                "from_email" => $from,
                "from_name" => "Admin",
                "subject" => $subject,
                "to" =>array(array('email' => $to )),
                "track_opens" => true,
                "track_clicks" => true,
                "auto_text" => true,
                "attachments" => array(
                    array(
                        'content' => $attachment_encoded,
                        'type' => "application/pdf",
                        'name' => $certificate_filename,
                    )
                )
            );

I am getting image from admin as custom option. Image url is coming as : http://xxx.xx.x.xxx/projectname/wp-content/uploads/2017/08/e-img1.png Any help/suggestions are welcome. Thanks in advance.

have you checked the image exist on the url on live server? – Asfandyar Khan Aug 31 '17 at 11:53 — Asfandyar Khan, Aug 31 '17 at 11:53

score 1 · Answer 1 · answered Nov 20 '18 at 14:39

is the image link http://xxx.xx.x.xxx/projectname/wp-content/uploads/2017/08/e-img1.png local ... meaning is that the same server running mpdf. if so, that path may not be accessible. try using an internal path to in image, and actually wordpress will probably be happy with a relative path to its root; (e.g. /wp-content/uploads/2017/08/e-img1.png)

if that is not an issue ... perhaps your live server lacks the graphics library for rendering, which was discussed here; mPDF 5.7.1 - image displays as a broken [x]

Ono Tosamo · Answer 2 · 2022-03-03T13:37:07.090

1

My images also worked only in localhost. I think it has something to do with ssl. Anyway, if anyone needs a solution: https://mpdf.github.io/what-else-can-i-do/images.html#image-data-as-a-variable

Essentialy you get the content of an image file outside of a template and then pass it there as a variable:

$mpdf->imageVars['myvariable'] = file_get_contents('alpha.png');

In template:

<img src="var:myvariable" />

edited Mar 03 '22 at 13:37

answered Mar 01 '22 at 13:36

Ono Tosamo

31
6

This is more of a comment. Not an answer. – ClydeFrog Mar 02 '22 at 07:45

score 0 · Answer 3 · answered Sep 01 '17 at 04:40

0

For me the problem is permission error in some of the mPDF folder. Ensure that you have write permissions set for the following folders:

/ttfontdata/
/tmp/
/graph_cache/

https://mpdf.github.io/installation-setup/installation-v6-x.html Hope this helps.

answered Sep 01 '17 at 04:40

samjhana joshi

1,995
4
35
69

How to do that? – Saroj Mar 06 '21 at 09:52
@SpyDie If you are talking about how to give permission, you can do that by right click on your mouse. – samjhana joshi Mar 07 '21 at 03:53

score 0 · Answer 4 · answered Nov 10 '19 at 17:56

0

For me the only solution that worked was using the relative path on the server:

/var/www/www.domain.com/myimg.jpg

answered Nov 10 '19 at 17:56

Bruno Leveque

2,647
2
23
33

image in mPdf not showing in server though works well in localhost

4 Answers4