HTML邮件图片跨客户端显示问题咨询及方案需求

1. 跨所有客户端的统一显示方法 #

唯一能覆盖Gmail、Outlook全平台（网页端、桌面端、移动端）的通用方案是使用CID内嵌图片，具体操作：

• 在Power Automate发送邮件时，将图片添加为附件，设置IsInline属性为true，同时指定唯一的Content-ID（比如logo-cid）。
• 在HTML邮件中引用该图片：

  <img src="cid:logo-cid" alt="my logo">
  

这种方式把图片嵌入邮件本体，不依赖外部链接或Base64，所有主流邮件客户端都原生支持。

2. 针对Gmail等网页端的显示方案 #

如果不想用内嵌，可选择两种方式：

• 使用无权限限制的公开静态存储：将图片上传到支持匿名直接访问的静态存储（避开OneDrive/SharePoint这类需要权限验证或重定向的存储），确保链接能直接在浏览器打开且无需登录，再用普通<img>标签引用。
• 优先采用CID内嵌：这也是Gmail网页端完全支持的方案，不会出现拦截或显示失败问题。

注意：Gmail会拦截带跳转、权限验证的外部图片链接，这也是OneDrive共享链接无法正常显示的核心原因。

3. 通过条件注释/CSS实现客户端适配 #

JavaScript在所有邮件客户端中都被禁用，无法用于客户端识别。但可以通过Outlook专属条件注释和CSS媒体查询实现差异化显示：

• 针对Outlook桌面端（MSO）用条件注释指定Base64图片：

  <!--[if mso]>
  <img src="data:image/png;base64,@{variables('image')}" alt="my logo">
  <![endif]-->
  

• 针对其他客户端（Gmail、Outlook网页端、移动端）用CID内嵌或公开链接：

  <!--[if !mso]><!-->
  <img src="cid:logo-cid" alt="my logo">
  <!--<![endif]-->
  

另外，可通过@media screen and (max-width: 600px)这类CSS规则适配移动端，但客户端识别的核心还是依赖条件注释。

内容的提问来源于stack exchange，提问作者Hasan A Yousef