Laravel email shows images fine in Mailtrap but not visible in Gmail

I am using a simple Laravel Mailable below and have the header image displayed at the top of the email – this displays fine when going through Mailtrap.io but when the same email is sent to my Gmail account in the live environment it doesn’t display – what am I doing wrong?

class TwoFactorMail extends Mailable
{
    use Queueable, SerializesModels;

    public $code;

    public function __construct($code)
    {
        $this->code = $code;
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->markdown('emails.twofactor');
    }
}

JavaScript
​x
 
class TwoFactorMail extends Mailable{    use Queueable, SerializesModels;​    public $code;​    public function __construct($code)    {        $this->code = $code;    }​    /**     * Build the message.     *     * @return $this     */    public function build()    {        return $this->markdown('emails.twofactor');    }}​

Blade file

@component('mail::message')
<html>
<head>
    <title>Two Factor</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins|Roboto&display=swap" rel="stylesheet">
</head>
<body>
<img src="data:image/png;base64,{{base64_encode(file_get_contents(resource_path('img/header.jpg')))}}" alt="">
        <h1 class="header padded-margin">Authentication code</h1><hr class="divider">
        <p>Your Two-Factor Authentication is below. Add the code into your browser to complete your CrowdControlHQ Sign In.</p>
        <div class="code padded-margin">{{ $code }}</div>
        <p>If you didn’t request this code there is nothing to worry about - you can safely ignore it.</p>
</body>
</html>
@endcomponent

JavaScript
 
@component('mail::message')<html><head>    <title>Two Factor</title>    <link rel="preconnect" href="https://fonts.gstatic.com">    <link href="https://fonts.googleapis.com/css2?family=Poppins|Roboto&display=swap" rel="stylesheet"></head><body><img src="data:image/png;base64,{{base64_encode(file_get_contents(resource_path('img/header.jpg')))}}" alt="">        <h1 class="header padded-margin">Authentication code</h1><hr class="divider">        <p>Your Two-Factor Authentication is below. Add the code into your browser to complete your CrowdControlHQ Sign In.</p>        <div class="code padded-margin">{{ $code }}</div>        <p>If you didn’t request this code there is nothing to worry about - you can safely ignore it.</p></body></html>@endcomponent​

Answer

Its best to use the standard url based src for your image tag.

Just ensure you include the domain name in the url like this below.

<img src="http://www.example.com/image.jpg" alt="img" />

JavaScript
 
<img src="http://www.example.com/image.jpg" alt="img" />​

Most modern email clients do not accept base64 images.

You can read more about it here

https://blog.mailtrap.io/embedding-images-in-html-email-have-the-rules-changed/

search the page and read about these two subjects

1. Inline embedding, or base64 images in emails
1. Linked images, or hosted pictures in HTML emails

Advertisement

Answer