How to change Header Logo in Laravel Mailable template?

Question

I want to change the logo from the headerof the markdown template of mailables in Laravel.

original views/vendor/mail/html/header.blade.php:

<tr>
<td class="header">
<a href="{{ $url }}" style="display: inline-block;">
@if (trim($slot) === 'Laravel')
<img src="https://laravel.com/img/notification-logo.png" class="logo" alt="Laravel Logo">
@else
{{ $slot }}
@endif
</a>
</td>
</tr>

and I want to change the img src to:

<img src={{ $content }} class="logo" alt="Logo">

variable $content coming from mailable ContactMail.php:

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\DB;
use phpDocumentor\Reflection\DocBlock\Tags\Var_;

class ContactMail extends Mailable implements ShouldQueue
{
    use Queueable, SerializesModels;

    public function __construct()
    {
        $this->content = "storage/hg5zkMDJTAWaIjc8hH5jqtb5FGmOXfpccha2k0A4.png";

        return $this->markdown('emails.contact');
    }

    public function build()
    {
        return view('vendor.mail.html.header')->with('content', $this->content);
    }
}

but it ends up throwing:

ErrorException
Undefined variable $content (View: C:\Users\Artur\PhpstormProjects\stuttard.de\resources\views\vendor\mail\html\header.blade.php)

$content is undefined

How do I pass $content to header.blade.php correctly?

Edit:

ContactController.php:

<?php

namespace App\Http\Controllers;

use App\Mail\ContactMail;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;


class ContactController extends Controller
{
    public function test()
    {
        return new ContactMail();
    }
}

Answer 1

First, put the logo file in the public/img folder.

Next, update files:

1. resources/views/vendor/mail/html/header.blade.php

<tr>
    <td class="header">
        <a href="{{ $url }}" style="display: inline-block;">
            <img src="{{ url('img/your-logo.png') }}" class="logo" alt="Logo">
        </a>
    </td>
</tr>

2. resources/views/vendor/mail/html/themes/default.css

Find .logo and adjust the properties to your needs. If your image is 500x100px, then I recommend setting width to 250px and [max-]height to 50px due to the retina displays.

.logo {
    height: 50px;
    max-height: 50px;
    width: 250px;
}

3. resources/views/vendor/mail/html/message.blade.php

Replace the header slot code with this one:

{{-- Header --}}
@slot('header')
    @include('mail::header', ['url' => config('app.url')])
@endslot

And that's it.

Answer 2

I figured that after running:

php artisan vendor:publish --tag=laravel-mail

a new set of customizable blade files is created in:

/resources/views/vendor/mail/html

These are building blocks for the mailable template and can be edited.

Answer 3

You pass variable data not content Change your code to

<img src={{ $data }} class="logo" alt="Logo">

Added more answer
Try this you need to define $content variable first

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\DB;
use phpDocumentor\Reflection\DocBlock\Tags\Var_;

class ContactMail extends Mailable implements ShouldQueue
{
    use Queueable, SerializesModels;

    public $content;

    public function __construct()
    {
        $this->content = "storage/hg5zkMDJTAWaIjc8hH5jqtb5FGmOXfpccha2k0A4.png";

        return $this->markdown('emails.contact');
    }

    public function build()
    {
        return view('vendor.mail.html.header')->with('content', $this->content);
    }
}