Question

我在邮件的Css中有一些邮件的div类。但是当我在outlook或gmail中打开邮件时，我无法查看图像。但是当我在浏览器中打开邮件时，它显示的图像很好......

附上电子邮件的内容

    <!--CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dt--><!--CTYPE html PUBLIC "-//W3C//DTD XHTML 
1.0 Transitional//EN"     
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

    <style type="text/css">
.logo_print {   
    background-image:url("http://www.websitename.com//en-ca/images/logo_print.jpg");
    width:105px;height:79px; } .icon_shipped {  
    background:url("http://www.websitename.com//en-ca/images/icon_shipped.jpg");widt
    h:14px;height:14px; } .icon_not_shipped {   
    background:url("http://www.websitename.com//en-ca/images/icon_not_shipped.jpg");
    width:16px;height:15px; } .the_email_top 
    {width:560px;height:93px;background-image:url("http://www.websitename.com//en-ca
    /images/top.jpg")}
    </style>

    <title></title>
</head>

<body>
    <table border="0" cellspacing="0" cellpadding="0" align="center">
        <tbody>
            <tr valign="top">
                <td colspan="3">
                    <div class="the_email_top">
                </td>
            </tr>

            <tr valign="top">
                <td width="10">&nbsp;</td>

                <td width="540">
                    <div style="width: 10px; height: 12px; overflow: hidden;"></div>

                    <h1 style="margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #212121; font-weight: bold;">Password Reset</h1>

                    <div style="width: 10px; height: 16px; overflow: hidden;"></div>

                    <p><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">Dear Customer,</span></p>

                    <p><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">To reset your password, either click the link below or copy and paste it into your browser.</span><br>
                    <span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">&nbsp;</span><br>
                    <a href="http://www.websitename.com/en-ca/useraccount/resetPassword?NirvanaToken=01d4lKN1%2BTS5g94oEHejeR3IBovtHrwHnU6sfmjSCu5LMpnSjN5c6xX5s8rrOQ0p%0D%0A">Use this link.</a><br>
                    <span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">&nbsp;</span><br>
                    <span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">Please do not reply to this email.</span></p>

                    <p><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">Sincerely,</span></p>

                    <p><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">Your Web Site Hosting support team</span></p>

                    <div style="width: 10px; height: 60px; overflow: hidden;"></div>
                </td>

                <td width="10">&nbsp;</td>
            </tr>

            <tr valign="top">
                <td colspan="3" bgcolor="#F2F2F2">
                    <div style="width: 10px; height: 10px; overflow: hidden;"></div><span style="margin-left: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #999999;">&copy; 2011 Deluxe Enterprise Operations. All Rights Reserved.</span>

                    <div style="width: 10px; height: 55px; overflow: hidden;"></div>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Answer 1

大多数电子邮件程序默认会阻止图片 - 当您在实际客户端测试电子邮件时，您可能会看到“点击此处从XXX域启用图片”消息（他们这样做是为了防止跟踪，我想 - 不太确定为什么它如此常见）。然而，浏览器没有这样的疑虑，所以你的图像会显示得很好。

如果您希望图片显示在电子邮件客户端中，您只需要希望您的用户允许它们。也许他们会，但不要指望它 - 你应该建立你的电子邮件，这样即使没有图像它看起来也很好。

希望这会有所帮助（对不回答感到抱歉，但这就是电子邮件客户端的方式）！

Answer 2

除了Xavier消息，您还需要使用绝对URL（完整路径）。即：

http://www.example.com/[image].[ext]

如果您只是使用/[image].[ext]，它将无法在电子邮件客户端中使用，只使用[image].[ext]将无效，除非它已嵌入电子邮件本身。

我不建议将图像嵌入到电子邮件中，因为它会使人们需要下载更大的电子邮件并占用更多空间。

这是handy guide to css support in emails

b / c您用来查看电子邮件的程序不支持CSS背景图像。

Answer 3

如果我错了，请原谅我，但我一直认为电子邮件客户倾向于砍掉身体标签之外的所有内容。

您没有身体标签，而且，即使您这样做，您的CSS也会显示在您的头标签中。这是在身体标签之外。

我会添加一个body标签。然后我会将CSS放在body标签内。

对不起，如果我在这里有错误的想法，也许最近情况发生了变化

在邮件Html文件中添加的Css内容（图像）不显示图像

3 个答案: