Outlook HTML 签名无法加载图像

问题描述 投票：0回答：3

我已经为 Outlook 编写了 HTML 电子邮件签名，它可以在我的“撰写”窗口中正常加载，但一旦发送，图像将不会加载到收件人邮件中。我一直在努力显示背景图像，我终于成功地显示了它们，事实上，它们是唯一显示的，但插入的图像不会显示。

这是我的代码：

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
             <!-- BEGIN : CTA / Background image -->
             <!--[if gte mso 9]>
<img src="https://sigurat.mx/firmas/bg_01.jpg" alt="" border="0" width="550" height="200" style="display:block;" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:550; height:200; position:absolute; top:0; left:0; border: 0; z-index: 2">
<v:fill color="#ffffff" opacity="0%" style="z-index: 1;" />
<div>

<![endif]-->
<!-- Containing Table START-->
            <table border="0" cellspacing="0" cellpadding="0" style="background-image: url(https://sigurat.mx/firmas/bg_01.jpg); background-repeat: no-repeat; background-position: left bottom;">

                
               <tbody>
                
                    
                    <tr>
                        <td width="170px" style="text-align: center;">
                            <img src="https://sigurat.mx/firmas/qr-01.png" width="150" height="150" alt=""/>
                        </td>
                        <td width="220px" style="margin-left: 20px;">
                            <p style="font-family: 'Open Sans', sans-serif; font-weight: 700; color:#65656A; font-size: 14px; ">
                                Name<br><span style="font-family: 'Open Sans', sans-serif; font-weight: 400; color:#96C93D; font-size: 12px;">Directora y Agente Titular</span>
                            </p>
                            <p>&nbsp; </p>
                            <p style="font-family: 'Open Sans', sans-serif; font-weight: 400; color:#65656A; font-size: 12px;">
                                <img src="https://sigurat.mx/firmas/tel-01.png" width="12" height="12" alt=""/> &nbsp; (55) <span style="font-weight: 700;">123405789</span><br>
                                <img src="https://sigurat.mx/firmas/cel-01.png" width="12" height="12" alt=""/> &nbsp; (55) <span style="font-weight: 700;">1234 5678</span><br>
                                <a href="mailto:[email protected]" style="text-decoration: none; color:#65656A;"><img src="https://sigurat.mx/firmas/mail-01.png" width="12" height="12" alt=""/> <span style="font-weight: 700;"> &nbsp; mail</span>@mail.mx</a><br>
                                <a href="http://www.websitet.mx" style="text-decoration: none; color:#65656A;"><img src="https://sigurat.mx/firmas/web-01.png" width="12" height="12" alt=""/> <span style="font-weight: 700;"> &nbsp; sigurat</span>.mx</a></p></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td></td>
                    </tr>
                    
                </tbody>

            </table>
  
           
           
            <table border="0" cellspacing="0" cellpadding="0">
               


            <tbody>
                    <tr style="padding-top:6px;">
                        <td style="text-align:left;">
                            
                          <a href="https://www.youtube.com/channel/UCsct4-vLXeYlq6r8WMAA-rg"><img src="https://sigurat.mx/firmas/yt.png" width="12" height="12" alt=""/></a>&nbsp;<a href="https://www.facebook.com/SiguratSegurosYFianzas"><img src="https://sigurat.mx/firmas/fb.png" width="12" height="12" alt=""/></a>&nbsp;<a href="https://www.linkedin.com/company/siguratmx/?originalSubdomain=mx"><img src="https://sigurat.mx/firmas/in.png" width="12" height="12" alt=""/></a>  &nbsp;<span style="font-family: 'Open Sans', sans-serif; font-weight: 400; color:#FFFFFF; font-size: 12px;">Escanea el QR y guarda mis datos en tu celular.</span>
                        </td>
                        <td>
                            
                            
                        </td>
                    </tr>
                </tbody>
            </table>
                      <!-- Containing Table END-->
<!--[if gte mso 9]>
</div></v:fill></v:rect><![endif]-->

            <!-- END : CTA / Background image -->

    </body>
</html>

这就是发送后在收件人邮件上呈现的方式：

背景图像加载完美，但所有其他插入的图像都被 Microsoft 阻止。

任何帮助都会很棒。预先感谢。

html outlook html-email
3个回答
0
投票

Word 不支持 

background-image
属性。它充当电子邮件编辑器，因此您需要遵循 Word 中应用的规则。您可以在Outlook 中的 Word HTML 和 CSS 渲染功能文章中了解有关支持和不支持的 HTML 元素、属性和级联样式表属性的更多信息。

理想情况下，我建议将图像作为嵌入图像附加，然后使用 

cid
前缀在消息正文中使用它们。这是因为 Outlook 默认情况下可能会阻止基于 Internet 的图像（通过 URL 引用）。例如，您可以附加图像并在消息中使用以下结构来引用附加图像：

<IMG src="cid:Communications.jpg" width=200>

请参阅使用 VBA 在电子邮件中嵌入图像了解更多信息。

0
投票

Outlook 默认情况下会阻止所有外部图像。收件人（但不是发件人）可以在每条消息的基础上启用外部图像，但如果您的消息要发送给您无法控制的收件人，则显示图像的唯一方法是将其添加为附件并引用通过 HTML 正文中 

<img>
标签中的内容 ID 来获取它。请参阅 在 Outlook 电子邮件中包含图片 .

0
投票

我注意到对这个问题的回答忽略了主要的关键问题，即它似乎适用于某些图像，但不适用于其他图像。 建议将所有图像作为附件包含在内，完全忽略了蹩脚的 Outlook 的可疑行为（但对 Microsoft 而言），因为它适用于某些链接的图像，但不适用于其他图像。 正是 Outlook 造成这种歧视的原因需要一个答案。 如果您不知道，请不要发布答案 - 不要只是发布不同问题的答案！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.