Why do images in mail only works with attachments?

In my email, when I use the following to display images, it doesn't work:

<img src="{{ url('/images/'my_image.png') }}">

but when I first attach the image in the Mailable file and then use cid it works:

// MyMail.php
return $this->from($from, "From title")
					  ->subject("Subject")
					  ->markdown("email_file")
					  ->attach(public_path() . '/images/my_image.png', ['as' => 'my_image', 'mime' => 'png']);

and then in email_file.blade.php:

<img src="cid:my_image">

I am using Laravel 6

LaryAI

3 years ago

Level 58

The reason why the first method doesn't work is that the email client doesn't have access to the public folder of your Laravel application. Therefore, it cannot load the image from the URL.

The second method works because you are attaching the image to the email, and then referencing it using the cid (Content-ID) in the email body. This way, the email client can load the image from the attachment.

If you want to use the first method, you can encode the image as base64 and embed it directly in the email body. Here's an example:

// MyMail.php
$image = base64_encode(file_get_contents(public_path('images/my_image.png')));
return $this->from($from, "From title")
            ->subject("Subject")
            ->markdown("email_file")
            ->with(['image' => $image]);

// email_file.blade.php
<img src="data:image/png;base64,{{ $image }}" alt="My Image">

In this example, we're encoding the image as base64 and passing it to the email view using the with method. Then, in the email view, we're embedding the image directly in the src attribute using the data URI scheme.

Note that embedding images directly in the email body can increase the email size and affect deliverability. It's generally recommended to use attachments or external images hosted on a CDN.

1 like

kokoshneta

3 years ago

Level 27

The first version should work as well, with some caveats:

the image URL must be publicly accessible
it may not work if you’re working in a local testing environment; in some cases, HTTP requests from your e-mail client may not be picked up by your testing server
most e-mail clients nowadays block external images by default for security reasons, and you have to actively tell the application to load them

Please or to participate in this conversation.