React+MUI项目邮件HTML模板无法居中及图片加载失败问题

问题1：邮件内容无法垂直居中 #

邮件客户端对CSS的支持和浏览器差异极大，flex布局在多数邮件客户端（包括Chrome/Firefox的邮件预览）中会被过滤或不支持，而且<head>里的内嵌样式表经常被邮件客户端忽略。

修复方案： #

改用邮件兼容的传统居中方式，优先使用内联样式+表格布局：

• 给<body>添加内联样式设置水平居中；
• 用外层表格包裹整个内容区域，确保在各种客户端中稳定居中；
• 避免依赖<head>里的样式，关键样式直接写在元素的style属性中。

问题2：图片无法加载 #

你导入的本地图片路径${dgoow}是React开发环境的相对路径，邮件客户端无法访问本地资源，自然加载失败。

修复方案： #

有两种可行方式：

• Base64嵌入：将图片转换成Base64字符串，直接写入src属性，无需依赖外部资源；
• 公网绝对URL：把图片上传到云存储或静态资源服务器，使用完整的HTTP/HTTPS地址作为src。

修改后的完整代码示例 #

// 替换成你自己图片的Base64编码（可通过在线工具转换）
const dgoowBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5gMVESkqQzkWSwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAUSURBVBgZBcHPcsAABAAAQ+zWF8wAAAAASUVORK5CYII=";

export const emailBody = (event, date, channels, priority, countries) => {
  return `
<html>
<head>
  <style>
    * {
      font-family: Helvetica, Arial, sans-serif;
    }
    h1, h3, h5 {
      color: white;
    }
    table {
      border: none;
      width: 100%;
    }
    button {
      color: white;
      border-radius: 5px;
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
      font-size: 16px;
      cursor: pointer;
      background-color: #fd8204;
      border: none;
      padding: 1rem;
      margin-bottom: 2rem;
    }
    img {
      height: 70px;
      width: 150px;
    }
  </style>
</head>
<body style="margin: 0; padding: 2rem; text-align: center; background-color: #f5f5f5;">
  <!-- 外层表格确保全客户端居中兼容 -->
  <table cellpadding="0" cellspacing="0" style="width: 100%;">
    <tr>
      <td align="center">
        <div style="background-color: #050914;border-radius: 10px;padding: 3rem;width: 800px;max-width: 90%;"> 
          <table cellpadding="0" cellspacing="0">
            <tr>
              <td style="text-align: start; padding: 1rem; width: 50%;">
                <img src="${dgoowBase64}" alt="DWEGO logo" />
              </td>
              <td style="text-align: end; padding: 1rem; width: 50%;">
                <img src="${dgoowBase64}" alt="DWEGO logo" />
              </td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: center; font-size: 20px">
                <h1>HWRTE Notification</h1>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: center; font-size: 20px">
                <h3>Event: ${event}</h3>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: center; font-size: 20px">
                <h3>Date: ${date}</h3>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: center; font-size: 20px">
                <h3>Channels: ${channels}</h3>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: center; font-size: 20px">
                <h3>Priority: ${priority}</h3>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: center; font-size: 20px">
                <h3>Countries: ${countries}</h3>
              </td>
            </tr>
            <tr>
              <td colspan="2" align="center">
                <a href="www.google.com" target="_blank">
                  <button>JOIN THE BRIDGE</button>
                </a>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>`;
};

额外提示 #

1. 邮件开发优先用表格布局，这是行业通用的兼容方案；
2. 关键样式尽量用内联样式，避免依赖<head>或外部样式表；
3. 测试时直接用主流邮件客户端查看效果，确保兼容性。

内容的提问来源于stack exchange，提问作者Felipe Useda