简体   繁体   English

在 Mac 邮件中使用 Amazon SES 错误格式发送的 Rails 邮件

[英]Rails mails sent with Amazon SES wrong format in Mac mail

I have a Rails webapp deployed in an Amazon EC2 instances that is using email templates in html with a header and logo and SES Amazon email service to send notification emails.我在 Amazon EC2 实例中部署了一个 Rails webapp,它使用带有标题和徽标的 html 电子邮件模板和 SES Amazon 电子邮件服务来发送通知电子邮件。

The emails are sent and correctly and they are displayed perfectly in all mail clientes (ie gmail, hotmail) even my mobile phone but in the Mac mail, where the logo is not displayed correctly.电子邮件已正确发送,并且它们在所有邮件客户端(即 gmail、hotmail)甚至我的手机中都能完美显示,但在 Mac 邮件中,徽标未正确显示。

Please, see a screenshot attached.请看附上的截图。

在此处输入图片说明

UPDATE: I´m testing with Chrome and a Gmail account.更新:我正在使用 Chrome 和 Gmail 帐户进行测试。 If I open exactly same email in both (Mac mail and Chrome) I can see it right in Chrome, however, I see it wrong in Mail.如果我在两个(Mac 邮件和 Chrome)中打开完全相同的电子邮件,我可以在 Chrome 中正确地看到它,但是,我在邮件中看到它是错误的。 I have checked the logo size is not been respected from CSS in Mail.我已经检查过邮件中的 CSS 没有遵守徽标大小。

Please, see an screenshot from Gmail in Chrome.请在 Chrome 中查看 Gmail 的屏幕截图。 I see it right on mobiles too.我在手机上也看到了。在此处输入图片说明

I attach the Rails code to generate the email:我附上 Rails 代码以生成电子邮件:

In email_service.rb:在 email_service.rb 中:

  # booking request admin
  def send_booking_request_admin_notification(customer, provider, boat, booking)
    @customer = customer
    @provider = provider
    @boat = boat
    @booking = booking
    attachments.inline['logo.png'] = File.open("#{Rails.root.to_s + '/app/assets/images/logo.png'}", "rb") {|io| io.read}   
    mail(from: APP_CONFIG['YANPY_EMAIL_FROM'], to: APP_CONFIG['YANPY_EMAIL_FROM'], subject: t('booking_request_Yanpy_subject', user_email: customer.email , owner_email: provider.email, booking_code: booking.code))
  end

In send_booking_request_admin_notification.erb:在 send_booking_request_admin_notification.erb 中:

<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
    <link rel="stylesheet" type="text/css" href="https://s3-eu-west-1.amazonaws.com/yanpy.dev/css/emails.css">
  </head>
  <body>
    <div id="nav-bar">
        <%= image_tag attachments['logo.png'].url, alt: 'Yanpy', size: '87x30', :class => "logo" %>
    </div>
    <div id="mail-content">
        <h4><%= t('admin_hello') %></h4>
        <p><%= t('booking_request_Yanpy_content_1', user_email: @customer.email, boat_name: @boat.name , owner_email: @provider.email, booking_code: @booking.code) %></p>
        <p><%= t('admin_goodbye_1') %></p>
        <p><%= t('admin_goodbye_2') %></p>
    </div>
  </body>
</html>

I have tried to reproduce the issue by resizing the browser Chrome windows in height and width but I couldn´t.我试图通过调整浏览器 Chrome 窗口的高度和宽度来重现该问题,但我做不到。

UPDATE 2: I attach the relevent HTML code from Gmail in Chrome (working):更新 2:我在 Chrome 中附加了来自 Gmail 的相关 HTML 代码(正在运行):

<div style="background:#f8f8f8;margin:0px;padding:0px" bgcolor="#f8f8f8">

    <div style="background:#1b1b1b linear-gradient(to bottom,#222,#111);border:#252525;min-height:50px;width:100%">
        <img alt="Yanpy" height="30" src="?ui=2&amp;ik=836c81b94f&amp;view=fimg&amp;th=149e8a5ae9582fb1&amp;attid=0.1&amp;disp=emb&amp;attbid=ANGjdJ8q_xSPAswkC2fDqsoAHPR0qKIUHUDjW45HorJli1u9zmcocdWFYXYi2rysx9cYcvsx7KJScrWLqDHBAOP-5W5g7LynDaj0cnMtQyS_P7D3A8ihhvpRKBLttmw&amp;sz=w174-h60&amp;ats=1416947426145&amp;rm=149e8a5ae9582fb1&amp;zw&amp;atsh=1" width="87" style="margin-left:20px;margin-top:10px" class="CToWUd">
</div>

Now, from Mac Mail not working (note: I´m not sure if this is the real code, I don´t know how to get it from Mail. I just forwarded the email to a Hotmail account and got it from there):现在,从 Mac Mail 无法正常工作(注意:我不确定这是否是真正的代码,我不知道如何从 Mail 获取它。我只是将电子邮件转发到一个 Hotmail 帐户并从那里获取):

<div style="background-color:rgb(248, 248, 248);padding:0px;font-family:Helvetica;font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;"><div style="background-color:rgb(27, 27, 27);border:rgb(37, 37, 37);height:50px;width:727px;background-position:initial initial;">

<img id="ecx52214002-0011-49E6-B577-6C08A8DA9C9E" height="121" width="352" src="https://dub126.afx.ms/att/GetInline.aspx?messageid=5293f1b7-74df-11e4-9417-00237de45652&amp;attindex=0&amp;cp=-1&amp;attdepth=0&amp;imgsrc=cid%3a32FDE1B1-DA1A-4A66-B63C-BBB067B5AB81%40Home&amp;cid=ed5bb1624ed90a36&amp;shared=1&amp;hm__login=roberto.chingon&amp;hm__domain=hotmail.com&amp;ip=10.148.132.8&amp;d=d3103&amp;mf=0&amp;hm__ts=Wed%2c%2026%20Nov%202014%2008%3a11%3a10%20GMT&amp;st=roberto.chingon&amp;hm__ha=01_745f8f086a98f87d549a0721ddd5738b4bfecce8795f549762672eea9f5cf5ba&amp;oneredir=1"></div><div style="padding:20px;"><h4>Hola Admin,</h4><p>El usuario prueba se ha registrado con el email<span class="ecxApple-converted-space">&nbsp;</span><a href="mailto:propietario.yanpy3@gmail.com">propietario.yanpy3@gmail.com</a><span class="ecxApple-converted-space">&nbsp;</span>correctamente.</p><p>Un saludo,</p><p>El equipo de Yanpy.</p></div></div>

Apple Mail 使用类似于 Outlook for Mac 的 WebKit 渲染引擎,您应该尝试使用 Chrome 和 Safari 等 WebKit 浏览器对其进行测试。

I fixed it.我修好了它。 Working with emails you have to develop like an old school HTML, I mean, you cannot link to external CSS files.处理电子邮件时,您必须像老式 HTML 一样进行开发,我的意思是,您无法链接到外部 CSS 文件。 Instead, you should add your css properties directly in the HTML template.相反,您应该直接在 HTML 模板中添加您的 css 属性。 Even better if it´s inline css in the style attribute of the tags.如果它在标签的 style 属性中嵌入了 css,那就更好了。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM