Technology WordPress Tips & Tricks

How to Fix Broken Image Links in Your Email From a Localhost?

Broken image links in emails sent from localhost trip up a lot of developers during testing. Here is how to fix them, so your email templates render correctly while you build instead of showing broken placeholders.

Akshay Jain Akshay Jain 3 min read
How to Fix Broken Image Links in Your Email From a Localhost?

Setting up a local host is an integral part of being a web designer, as you have to frequently work on local installations for the development and tweaking of a website or plugin. The local host performs all the functions of a regular server and offers some significant advantages over remote server hosting.

However, one of the drawbacks of using a local server is that it does not let you send images in an email from the local server to a remote server. The embedded image links are broken and do not get displayed at the receiver’s end. This happens as the email service provider cannot resolve the path to the local server.

To overcome this problem, you can incorporate a simple function before you send the email, as follows:

Step 1: Before calling the ‘wp_mail’ function, add action (‘phpmailer_init’, ‘EmbedImageInMail’)

Step 2: This calls the function to embed all required images within the mail. The function name ‘EmbedImageInMail’ is customizable and can be altered as necessary.

Step 3: Remove the action (‘phpmailer_init’, ‘EmbedImageInMail’).

This step is important the open function may interfere with the working of some other plugin’s mail functionality, which is installed on the site.

Note that the function name has to be same in the add and remove action functions.

The complete code snippet for this is:

add_action(‘phpmailer_init’, ‘EmbedImageInMail’);

wp_mail($recipient, $subject, $content, $headers, $attachments);

remove_action(‘phpmailer_init’, ‘EmbedImageInMail’);

Code for the ‘EmbedImageInMail’ function:

function EmbedImageInMail()
{
    global $phpmailer;
    $body = $phpmailer->Body; //Email content send to mailer
    $uploadDir = wp_upload_dir(); //Wordpress upload directory
    $baseUploadUrl = $uploadDir['baseurl'];
    $baseUploadPath = $uploadDir['basedir'];
    // get all img tags
    preg_match_all('/<img.*?>/', $body, $matches);
    if (!isset($matches[0])) {
        return;
    }
    // foreach tag, create the cid and embed image
    $i = 1;
    foreach ($matches[0] as $img) {
    // make cid
    $id = 'img'.($i++);
    // replace image web path with local path
    preg_match('/src=\'(.*?)\'/', $img, $m);
    if (empty($m)) {
    preg_match('/src="(.*?)"/', $img, $m);
    }
    if (!isset($m[1])) {
    continue;
    }
    if (strpos($m[1], get_bloginfo('url')) === false) {
    continue;
    }
    // $m[1] holds the url of image
    $uploadPathSegment = str_ireplace($baseUploadUrl, '', $m[1]);
    $uploadPathSegment = rtrim($uploadPathSegment, '/');
    $completeImagePath = $baseUploadPath.$uploadPathSegment;
    // add
    $phpmailer->AddEmbeddedImage($completeImagePath, $id, 'attachment', 'base64');
    $body = str_replace($img, '<img class="prodImage" alt="Product Image" src="cid:'.$id.'" style="height:50px; width:50px;" />', $body);
    }
    $phpmailer->Body = $body;
}

This integrates the functionality of sending images from your local host server to any email address through any email service provider.

Get a FREE Consultation

Let's build something that lasts.

Share what's on your mind — a clear brief, a half-formed idea, or just a sense that something needs to change. We'll listen first, ask the right questions, and point you toward what's actually worth building.

We take on a handful of projects each quarter,ones where we can truly make a difference.

  • Receive a human response within 24 hours
  • Get a detailed scope and quote upfront
  • We're happy to sign an NDA upon request

    Free 30-Min Strategy Call

    Your Name *

    Your Phone No *

    Work Email *

    Your Budget*

    Project Details *