MJML+Jinja2邮件模板图片无法在移动端邮箱、Outlook显示如何解决

• 核心原因：谷歌相册的资源访问限制。谷歌相册生成的共享链接不属于静态资源直链，自带UA校验、Referer防盗链限制：Gmail网页版属于谷歌同生态产品，请求时的UA、Referer都在谷歌相册的白名单范围内，可以正常加载；但Gmail移动端APP、Outlook等客户端发起请求时的标识不符合校验规则，谷歌会直接返回403拒绝访问或重定向到登录页，导致图片无法加载。
• 次要代码问题：
  1. 代码存在拼写错误：CSS属性backgound-repeat拼写错误（少了字母r，应为background-repeat），导致背景图配置不生效
  2. 自定义img标签的src属性未加引号，若图片链接包含特殊字符会被截断
  3. Outlook对CSS背景图的支持度极低，使用background属性加载核心图片本身就存在兼容问题
  4. 将图片相关代码放在<mj-text>标签内，mj-text自带的文本行高、间距样式会干扰图片渲染

1. 优先更换图片存储源（最稳定方案） #

不要使用谷歌相册作为邮件图片的存储载体，改用专门的静态资源存储服务：

• 选择支持自定义CORS规则、可关闭防盗链的对象存储服务即可
• 上传图片后生成无需登录即可直接访问的永久直链，配置CORS规则允许所有来源访问，或把常用邮件客户端的Referer加入白名单
• 不要使用共享页链接，确保无痕模式下直接访问链接可正常显示图片

2. 代码层面优化 #

• 优先使用MJML原生的<mj-image>组件，不要自定义div背景图或者原生img标签，MJML会自动处理各邮件客户端的渲染兼容
• 不要将图片组件放在<mj-text>标签内，避免文本样式干扰
• 所有模板变量渲染的属性值都加英文双引号，避免特殊字符截断
• 统一使用png/jpg格式的图片，不要使用SVG（大部分邮件客户端不支持SVG渲染）

优化后代码示例：

<!--chart-->
<mj-section border-left="solid 2px #bebebe" border-right="solid 2px #bebebe">
  <mj-column>
    <mj-image 
      align="center" 
      src="{{data.chart}}" 
      width="500px"
      height="350px"
      alt="report"
      title="report"
      border="0"
      style="display:block"
    />
  </mj-column>
</mj-section>
<!--/chart-->

3. 特殊场景兼容（如果必须使用谷歌相册） #

如果临时需要使用谷歌相册的资源，不要使用photos.app.goo.gl开头的共享页链接，打开共享页面后右键点击图片，选择「复制图片地址」，获取lh3.googleusercontent.com开头的直链，该类链接可临时绕过部分校验，但存在有效期，不适合长期使用。

内容的提问来源于stack exchange，提问作者DINA TAKLIT