Amazon SES 破壞 CSS 並且圖像不顯示

Question

我想像這樣通過 Amazon SES 發送 HTML 電子郵件。 但我得到的是這樣的。 我使用 AWS.SES 的 sendEmail 方法實現如下。 但是 2 列 CSS 使用display: inline-block;中斷。 並且圖像未使用絕對路徑src="https://aaa.com/images/woman-with.jpg"顯示。 我通過 PutsMail 進行了測試。 Gmail 沒有問題。 但是通過 SES，它不起作用。 所以我的代碼可能有一些問題。 如果您能給我一些建議，我將不勝感激。

index.js

import * as messages from './messages';
// Load the AWS SDK for Node.js
var AWS = require('aws-sdk');
// Set the region
AWS.config.update({ region: 'REGION' });

// Create sendEmail params
var params = {
  Destination: {
    /* required */
    CcAddresses: [
      'EMAIL_ADDRESS',
      /* more items */
    ],
    ToAddresses: [
      'EMAIL_ADDRESS',
      /* more items */
    ],
  },
  Message: {
    /* required */
    Body: {
      /* required */
      Html: {
        Charset: 'UTF-8',
        Data: messages.txt,
      },
      Text: {
        Charset: 'UTF-8',
        Data: messages.html,
      },
    },
    Subject: {
      Charset: 'UTF-8',
      Data: 'Test email',
    },
  },
  Source: 'SENDER_EMAIL_ADDRESS' /* required */,
  ReplyToAddresses: [
    'EMAIL_ADDRESS',
    /* more items */
  ],
};

// Create the promise and SES service object
var sendPromise = new AWS.SES({ apiVersion: '2010-12-01' })
  .sendEmail(params)
  .promise();

// Handle promise's fulfilled/rejected states
sendPromise
  .then(function (data) {
    console.log(data.MessageId);
  })
  .catch(function (err) {
    console.error(err, err.stack);
  });

消息.js

// import SETTINGS from '../../../settings'

export default () => {
  const messages = {
      txt: [
        `先日はご利用いただきありがとうございました。`,
      ].join('\n'),
      html: [
        `<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">`,
        `<head>`,
        `<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />`,
        `<meta http-equiv="X-UA-Compatible" content="IE=edge" />`,
        `<meta name="viewport" content="width=device-width, initial-scale=1.0" />`,
        `<title>a</title>`,
        `</head>`,
        `<body style="margin: 0;background-color: #ccc">`,
          `<center class="wrapper" style="width: 100%;table-layout: fixed;background-color: #ccc;padding-bottom: 60px">`,
          `<table class="main" width="100%" style="border-spacing: 0;background-color: #fff;margin: 0 auto;width: 100%;max-width: 600px;font-family: sans-serif;color: #171a1b">`,
          `<!-- TWO COLUMN SECTION -->`,
          `<tr>`,
            `<td style="background-color: rgba(0, 128, 96, 1);color: #fff;padding: 0">`,
              `<table width="100%" style="border-spacing: 0">`,
                `<tr>`,
                  `<td class="two-columns" style="padding: 0;text-align: center;font-size: 0">`,
                    `<table class="column" style="border-spacing: 0;width: 100%;max-width: 300px;display: inline-block;vertical-align: top;text-align: center">`,
                      `<tr>`,
                        `<td style="padding: 0">`,
                          `<table class="content" style="border-spacing: 0;font-size: 15px;line-height: 20px;text-align: left">`,
                            `<tr>`,
                              `<td style="padding: 0">`,
                                `<img src="https://aaa.com/images/woman-with.jpg" alt="woman-with" title="woman-with" border="0" width="300" height="200"  style="display: block; max-width: 300px;border: 0" />`,
                              `</td>`,
                            `</tr>`,
                          `</table>`,
                        `</td>`,
                      `</tr>`,
                    `</table>`,
                    `<table class="column" style="border-spacing: 0;width: 100%;max-width: 300px;display: inline-block;vertical-align: top;text-align: center">`,
                      `<tr>`,
                        `<td class="padding" style="padding: 20px">`,
                          `<table class="content" style="border-spacing: 0;font-size: 15px;line-height: 20px;text-align: left">`,
                            `<tr>`,
                              `<td style="padding: 0">`,
                                `<p style="font-weight: bold; font-size:18px;">3% オフ</p>`,
                                `<p style="font-size:14px;">レビュー頂くと...</p>`,
                                `<p style="padding-bottom: 14px;">次回のお買い物でご利用いただける3%オフのクーポンをゲット！</p>`,
                              `</td>`,
                            `</tr>`,
                          `</table>`,
                        `</td>`,
                      `</tr>`,
                    `</table>`,
                  `</td>`,
                `</tr>`,
              `</table>`,
            `</td>`,
          `</tr>`,
          `</table>`,
          `</center>`,
        `</body>`,
        `</html>`,
      ].join('<br />'),
    },
  return messages
}

https://stackblitz.com/edit/js-khno3j?embed=1&file=messages.js

Answer 1

最后我不應該使用].join('<br />') 。

Amazon SES 破壞 CSS 並且圖像不顯示

問題描述

1 個解決方案

解決方案1
0 2022-06-09 07:55:09

Amazon SES 破壞 CSS 並且圖像不顯示

問題描述

1 個解決方案

解決方案1 0 2022-06-09 07:55:09

解決方案1
0 2022-06-09 07:55:09