Laravel 中的电子邮件视图格式问题:Outlook 与 Gmail 兼容性

Email View Formatting Issue in Laravel: Outlook vs. Gmail Compatibility

提问人:Julián Oviedo 提问时间:10/12/2023 更新时间:10/12/2023 访问量:18

问:

以下是 Laravel 中显示在电子邮件中的视图,这意味着它被发送到用户的电子邮件地址。我面临的问题是元素的格式在Outlook中正确显示,但在Gmail中无法正确显示。谁能帮我或知道原因?

也许您注意到图像是硬编码的,这是我发现的唯一东西,因为我在使用“资源”在 Laravel 视图中加载图像时遇到麻烦。这可能是问题所在吗?

代码如下:

<!doctype html>
<html lang="es">
    <head>
        <title>Portal</title>
        <meta name="description" content="Our first page">
        <meta name="keywords" content="html tutorial template">
        <style>
            #btn_cambiar_pass {
                border: solid 1px #00aff0;
                background: #00aff0;
                border-radius: 50px;
                display: inline-block;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                padding: 0 30px;
                text-decoration: none;
            }
            #central {
                display: flex;
                flex-direction: column;
                justify-content: left;
                text-align: left;
            }
            #btn_validar_email_txt {
                color: white;
                font-size: 1em;
                font-family: sans-serif;
                font-style: normal;
            }
            #info_text {
                font-family: sans-serif;
                font-style: normal;
                font-size: 1.5em;
            }
            #username_text {
                font-family: sans-serif;
                font-style: normal;
                font-size: 2em;
                font-weight: bold;
            }
            #header {
                background-color: #7ca157;
                padding: 30px;
                text-align: left;
            }
            #header h1 {
                margin: 0;
                font-size: 24px;
                color: white;
            }
            .horizontal-line {
                border-top: 1px solid black;
                width: 100%;
            }
        </style>
    </head>
    <body>
    <div id="central">
        <div id="header">
            <h1 style="font-size: 2.3rem; color: var(--maincolor); font-weight: bold; width: 100%; margin-top: 10px; margin-bottom:10px; font-family: serif;">Ciudadano Digital</h1>
       </div>
        <table style="width: 100%; border: none; border-collapse: collapse;">
            <tr>
                <td style="padding: 20px;"> 
                    <h1 style="font-size: 1.3rem;">{{$user->name }} {{$user->last_name}}</h1>
                    <p style="font-size: 1rem;">Para darte de alta en la plataforma, accede a tu cuenta haciendo clic en este botón.</p>
                    <br>
                    <a id="btn_cambiar_pass" href="{{'https://sistemasdesa.entrerios.gov.ar/cdig/html/ciudadanoDigital_Front/build/auth/email/validate?token=' . $mixto }}">
                        <p id="btn_validar_email_txt">Validá tu e-mail</p>
                    </a>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                </td>
            </tr>
            <tr>
                <tr>
                    <td style="padding: 20px;">
                        <img height="64px" width="auto" src="data:image/png;base64,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" alt="Gob"/>
                        <br>
                        <br>
                        <div class="horizontal-line"></div>                    
                        <br>
                        <p style="font-size: 1rem; color: black; width: 100%;">Check this link <a href="" style="color: blue;">contact</a></p>
                        <p style="font-size: 1rem; color: black; width: 100%;">Information: <a href="" style="color: blue;">Terms and conditions</a></p>
                    </td>    
                </tr>
            </table>
        </div>
    </body>
</html>
Laravel 电邮

评论


答: 暂无答案