我有图像保存在OneDrive，与授予查看访问权的所有人有链接，我发送一封电子邮件作为html文件，并希望显示我的图像，所以我使用下面的代码：

<img src="https://company-my.sharepoint.com/personal/myemail/Documents/public/FLK-LogoMini.png" alt="my logo">

一旦我在Office 365 Web上打开电子邮件，上述操作就可以正常工作。
以上不显示在Outlook Web，也不在Gmail，也不在Outlook桌面，也不在移动的应用程序！
我搜索了很多，并找到了一个推荐使用base64，所以我把我的图像转换成base64字符串使用https://www.browserling.com/tools/file-to-base64，然后使用图像标记为：

<img src="data:image/png;base64,@{variables('image')}/">

@{variables('image')}是base64字符串，但当我使用power automated flow阅读它时，它以以下格式显示：

base64字符串图像仅在MS oulook桌面上正确显示，而未在任何基于Web的应用程序或移动的应用程序中显示。
我有3个问题，希望得到支持：
1.是否有一个统一的方式来让图像显示正确的每一个地方，Gmail，Outlook，Outlook应用程序，Office 365 Outlook，..
1.如果第1点的答案是“否”，我如何在基于web的电子邮件客户端（如gmail）显示图像？
1.有没有办法在html电子邮件中使用CSS或JavaScript，这样我就可以读取客户端的时间，并使用正确的方式来显示图像，比如：

// I tried JS but looks it is not working inside html email!

if (client === outlook_Desktop_app) {
   <img src="data:image/png;base64,@{variables('image')}/">
} else if (client === office365_outlook) {
   <img src="https://company-my.sharepoint.com/personal/myemail/Documents/public/FLK-LogoMini.png">
} else { // i.e. web based like gmail and outlook web
   <img src="xxxx/FLK-LogoMini.png">
}

 <div style="display:inline-block; width:100%; min-width:200px; max-width:340px;"> Outlook can’t render the CSS in this DIV but other email clients can, so we wrap this in a ghost table that replicates the DIV’s desktop style. In this case, a container 340px wide. </div> 

1条答案

按热度按时间

o7jaxewo1#

JavaScript在电子邮件客户端不起作用，但conditional CSS可以起作用，所以我们可以使用MSO（Microsoft Office）标签在电子邮件模板的任何地方添加HTML / CSS。其他电子邮件客户端将忽略此代码。它看起来如下：

<!--[if mso]>
    <table><tr><td>
        /* Outlook-specific HTML content goes here. */
    </td></tr></table>
<![endif]-->

MSO标记也可用于添加针对Outlook的样式（Outlook在中支持CSS）：

<!--[if mso]>
    <style>
        .example-class {
            /* Outlook-specific CSS goes here. */
        }
    </style>
<![endif]-->

另一个注意事项是outlook显示<div>为100%宽度，所以在outlook推荐的解决方案是使用Ghost tables，我们在电子邮件中使用MSO标签的主要方式是创建“幽灵表”，这样混合电子邮件就不会在Outlook中崩溃。混合设计使用内联块，最大宽度，最小宽度来堆叠表列。Outlook不支持这些CSS属性，因此我们使用MSO标记来创建只对Outlook应用固定宽度的“幻影表”。

功劳归于：https://stackoverflow.design/email/base/mso/

赞(0）回复(0）举报 2022-11-27

javascript 如何在HTML电子邮件中显示图像

1条答案

相关问题

热门标签

最新问答