如何在Laravel中添加邮件背景？PHP实现含背景、Logo的用户邮件发送

Hey there! Let's walk through how to add a custom background, your site logo, and dynamic username to your verification email using Laravel, building on the code you've already written.

Step 1: Fix Variable Passing to the Email Template #

First, your current code doesn't pass the user's name to the blade template—let's fix that so we can display the username in the email. Update the Mail::send array to include the username:

public function sendEmail($thisUser) {
    $general = GeneralSetting::first();
    $siteDetails = [
        'title' => $general->title,
        'footer' => $general->footer_bottom_text,
        'email' => $general->email
    ];

    // Optional: Dynamically set mail config (ensure format is correct)
    Config::set('mail.driver', env('MAIL_DRIVER', 'smtp')); // Prefer .env config
    Config::set('mail.from', [
        'address' => $siteDetails['email'],
        'name' => $siteDetails['title']
    ]);

    $mailData = [
        'email' => $thisUser['email'],
        'username' => $thisUser['name'], // Add this line to pass the username
        'verifyToken' => $thisUser['verifyToken'],
        'site_title' => $siteDetails['title'],
        'site_footer' => $siteDetails['footer']
    ];

    Mail::send('auth.verify-email', $mailData, function ($message) use ($mailData, $siteDetails) {
        $message->from($siteDetails['email'], $siteDetails['title'])
                ->to($mailData['email'], $mailData['username'])
                ->subject('Verify Your Account');
    });
}

Step 2: Build the Stylized Email Template (auth/verify-email.blade.php) #

The real magic happens in the blade template. We'll write HTML with inline CSS (critical for email client compatibility) to add a background, logo, and personalized greeting.

Place your logo and background image in the public/images folder of your Laravel project first. Then use this template:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ $site_title }} - Account Verification</title>
    <style>
        /* Inline styles work best for email clients */
        .email-wrapper {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            background: url('{{ asset('images/email-bg.jpg') }}') no-repeat center center / cover;
            padding: 40px 20px;
            font-family: Arial, sans-serif;
        }
        .logo-container {
            text-align: center;
            margin-bottom: 30px;
        }
        .logo-container img {
            width: 120px;
            height: auto;
        }
        .content-card {
            background-color: rgba(255,255,255,0.95);
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .greeting {
            font-size: 19px;
            color: #2d3748;
            margin-bottom: 20px;
        }
        .verify-button {
            display: inline-block;
            padding: 12px 28px;
            background-color: #2b6cb0;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            margin: 20px 0;
            font-weight: 600;
        }
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #718096;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="email-wrapper">
        <!-- Site Logo -->
        <div class="logo-container">
            <img src="{{ asset('images/site-logo.png') }}" alt="{{ $site_title }} Logo">
        </div>

        <!-- Main Content -->
        <div class="content-card">
            <div class="greeting">Hi {{ $username }},</div>
            <p>Thanks for signing up with us! To complete your account setup, please click the button below to verify your email address:</p>
            <a href="{{ url('verify/'.$verifyToken.'/'.$email) }}" class="verify-button">Verify My Account</a>
            <p>If you didn't create an account with {{ $site_title }}, feel free to ignore this email.</p>
        </div>

        <!-- Footer -->
        <div class="footer">{{ $site_footer }}</div>
    </div>
</body>
</html>

Key Notes for Email Compatibility #

• Background Images: Some clients (like Outlook) don't support CSS background properties well. If your background doesn't show, replace the wrapper div with a table that uses the background attribute instead.
• Image Paths: Use asset() to generate absolute URLs for images—this ensures they load properly in emails (local dev might need tools like ngrok to expose your server).
• Testing: Use tools like Mailtrap for local testing, or send test emails to your own inbox to check how it renders across clients.

内容的提问来源于stack exchange，提问作者Waqar Ali