html - 通过电子邮件发送 html 电子邮件模板后，收件箱中未显示图标、字体和图像

问题描述

我制作了一个电子邮件模板，一旦用户完成注册就会发送。该模板包含一些来自 font-awesome 的图标、图像和一些导入的 Google 字体。

当我在浏览器上查看 HTML 文件时，这些项目得到了完美呈现，但是当它作为电子邮件发送时，除了文本之外没有任何内容被呈现。

我尝试移动 CSS 样式内联，但这也不起作用。我无法理解问题所在。下面是代码。


{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--<link rel="stylesheet" href="{% static 'regd_success_email.css' %}">-->
<style>
    @import url('https://fonts.googleapis.com/css2?family=Carattere&display=swap');

body
{
    margin: 0;
    padding: 0;
}


table
{
    border-spacing: 0;
}

td
{
    padding: 0;
}


.wrapper
{
    width: 100%;
    table-layout: fixed;
    background-color: #cccccc;
    padding-bottom: 60px;
}

.welcome
{
    font-family: 'Carattere', cursive;
    
}

.main
{
    background-color: #ffffff;
    margin: 0 auto;
    width: 100%;
    max-width: 600px;
    border-spacing: 0;
    font-family: sans-serif;
    color: #4a4a4a;
}

.email-body
{
    font-family: 'Carattere', cursive;
    font-weight: bold;
    font-size: 25px;
    padding: 5px 0 15px;
}

.button
{
    background-color: #289dcf;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 12px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
}

.subs-and-pays
{
    font-size: 15px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 5px 0 5px;

}





@media screen and (max-width:600px) {
    
}


@media screen and (max-width: 400px) {
    
}
</style>



</head>
<body>
    


    <center class="wrapper">
        <table class="main" width="100%">

            <tr>
                <td height="8" style="background-color: #289dcf;"></td>
            </tr>

            <tr>
                <td style="background-color: #001035;">
                    <a href="http://127.0.0.1:8000/">
                        <img src="{% static '../static/images/logo1.png' %}" alt="" width="600px" style="max-width: 100%;">
                    </a>
                </td>
            </tr>

            <tr>
                <td style="padding: 5px 0 50px;">
                    <table width="100%">

                        <tr>
                            <td style="text-align: center; padding: 15px">
                                <p style="font-size: 50px;" class="welcome"><strong style="color: #289dcf;">Welcome to Solve Litigation</strong></p>

                                <p class="email-body">Hello, {{name}}, you have been succesfuly registered with Solve Litigation.</p>

                                
                                <a href="http://127.0.0.1:8000/" class="button">Go to Website <i class="fas fa-arrow-circle-right"></i></a>
                                

                            </td>
                        </tr>

                    </table>
                </td>
            </tr>

            
            <tr>
                <td height="2" style="background-color: #a6d8ee;"></td>
            </tr>

            <tr>
                <td style="padding: 5px 0 20px;">
                    <table width="100%">

                        <tr>
                            <td style="text-align: center; padding: 15px">
                                <p style="font-size: 20px;"><strong style="color: #289dcf;">Subscription and Payments</strong></p>

                                <p class="subs-and-pays"> For Subscription details and Payment methods click on the <strong> User Profile </strong> button after you login and then click on <strong>Payments</strong>. </p>
                            </td>
                        </tr>

                    </table>
                </td>
            </tr>

            <tr>
                <td height="2" style="background-color: #a6d8ee;"></td>
            </tr>

            <tr>
                <td style="padding: 5px 0 20px;">
                    <table width="100%">

                        <tr>
                            <td style="text-align: center; padding: 15px">
                                <p style="font-size: 20px;"><strong style="color: #289dcf;">Contact Us <i class="fas fa-envelope"></i> </strong></p>

                                <p class="subs-and-pays"> To contact us regarding more details, updation of the information provided during registration or any other queries, click on the <strong> User Profile </strong> button after you login and then click on <strong>Contact</strong>. </p>
                            </td>
                        </tr>

                    </table>
                </td>
            </tr>

            <tr>
                <td height="8" style="background-color: #289dcf;"></td>
            </tr>


        </table>
    </center>

   
    
</body>
 <script src="https://kit.fontawesome.com/2b3aa8f23b.js" crossorigin="anonymous"></script>
</html>

这是一个 Django 项目，所以我写的图像 URL 是 Django 模板语言的约定。

标签： htmlcss

html - 通过电子邮件发送 html 电子邮件模板后，收件箱中未显示图标、字体和图像

问题描述

解决方案

推荐阅读