MBC870
MBC870

Reputation: 373

How to embed base64 images in a Laravel markdown email

I have an automated email in Laravel PHP which informs the user that a particular product has expired.

I would like to include a base64 image which should be embedded within the email itself.

Is it possible to embed base64 images in a markdown email with Laravel?

If so how?

The following is the email markdown blade template:

@component('mail::message')
![Logo][logo]
[logo]: {{asset('frontend/img/core-img/logo-dark.png')}} "Logo"

**Product Expiry**

Dear {{$userName}},

This is to inform you that your product **{{$listingName}}**.

Your item was removed from the Market Place. Should you wish to re-list the item kindly do so from the app.

![alt]{{$listingImage}}

Should you require any information or need professional assistance kindly get in touch:

@component('mail::button', ['url' => ''])
    Contact Us
@endcomponent

Thanks,<br>
# **{{ config('app.name') }} Team**

![App Icon|100x100]({{asset('frontend/img/core-img/app-logo.png')}})
@endcomponent

and the is the class for this email template:

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;

class ListingExpiryEmail extends Mailable
{
    use Queueable, SerializesModels;

    protected $user_name;
    protected $listing_name;
    protected $listing_image;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    public function __construct($user_name, $listing_name, $image)
    {
        $this->user_name = $user_name;
        $this->listing_name = $listing_name;
        $this->listing_image = $image;
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->subject('MyHurryApp Listing Expiry')->markdown('emails.listings.listingexpiryemail', [
            'userName' => $this->user_name,
            'listingName' => $this->listing_name,
            'listingImage' => $this->listing_image
        ]);
    }
}

Thanks

Upvotes: 1

Views: 2871

Answers (2)

Margus Pala
Margus Pala

Reputation: 8663

This works for me

<img src="data:image/png;base64,{{base64_encode(file_get_contents(public_path('/image/logo.png')))}}">

Upvotes: 5

MBC870
MBC870

Reputation: 373

After further research I found out that this is not possible.

As per: https://superuser.com/questions/1199393/is-it-possible-to-directly-embed-an-image-into-a-markdown-document

Markdown documents is just a text file and text editors would not know what to do with a binary image within the "text".

Having said that there might be a way around this limitation:

There are methods like MIME and base64 to encode binary data into a text file in a sense, but most text editors and Markdown-renderers wouldn't know what to do with a MIME encoded document that contains a Markdown text part and a base64 encoded image part.

But I am still looking into a possible solution.

If someone can guide me further would be highly appreciated.

Thanks

Upvotes: -1

Related Questions