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'); } }
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
Advertisement
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" />
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
-
- Inline embedding, or base64 images in emails
-
- Linked images, or hosted pictures in HTML emails