ActionMailer 电子邮件预览与一个用户在生产中收到的不同

ActionMailer email preview is not the same as one user receives in production

我正在使用 Rails 6 和 ActionMailer 在用户加入时发送电子邮件。值得一提的是,我仅使用 API 应用程序并将其托管在 Heroku 上。

我有一个 .html.erb 视图设置,它看起来像这样:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
  <div style="width: 100%;display: flex;flex-direction: column;align-items: center;padding: 15px;background-color: white;font-family: 'Helvetica';color: #2c3e50">
    <h1>Welcome to company!</h1>

    <div style="height: 1px;background-color: dimgrey;width: 50%;margin-top: 10px; margin-bottom: 20px;"></div>

    <h4 style="margin:0">Want to learn more about our platform?</h4>
    <p style="margin-bottom: 30px">Check out <a href="#">this</a> quick video guide.</p>

    <h4 style="margin:0">Join our Discord server</h4>

    <h4 style="margin:0">Follow us on social media</h4>
    <p style="margin-bottom: 30px">Some icons with social media</p>


    <%= link_to "Create Password", @url, style: "color: white;padding:10px;border-radius:10px;margin-bottom:20px" %>
  </div>
</body>
</html>

现在,预览中的这段代码会给出这种视图

这很好,这就是我想要的。

但是当用户在生产中收到它时,它看起来像这样

我是否使用了不该使用的东西?怎么让它看起来像预览中的样子。

这里还有一些您可能感兴趣的文件:

我添加到 production.rb 的关于邮件程序的内容:

  config.action_controller.asset_host = 'https://myapponheroku'
  config.action_mailer.asset_host = config.action_controller.asset_host

  config.action_mailer.perform_caching = false

  config.action_mailer.delivery_method = :smtp
  host = 'myapponheroki'
  config.action_mailer.default_url_options = { host: host }

  # smtp settings here

我是否必须在此处添加任何其他内容才能使其正常工作?

我的邮件位于 app/views/user_mailer

请询问您是否需要更多代码片段或信息。

该屏幕截图使用的是什么电子邮件客户端?可能只是电子邮件客户端问题和 flex。也许为了调试,您可以更改您的视图以仅使用常规 table 并查看是否修复了格式。

此外,我过去曾成功地使用过这些。大多数主要电子邮件客户端通常都能很好地处理它们。

https://litmus.com/community/templates