时间戳

首页 > 解决方案 > 如何防止 Outlook 中 HTML 模板中的图像使用 React 进行不必要的扩展？

css - 如何防止 Outlook 中 HTML 模板中的图像使用 React 进行不必要的扩展？

问题描述

我正在使用 React 创建一个电子邮件生成器。我正在渲染表格（因为这是电子邮件必须具备的）。

在大多数电子邮件浏览器中，电子邮件看起来不错，但在 Outlook 中会扩展图像并破坏布局。

这是渲染图像的特定组件：

const Ad = ({ image, link, hasDivider, styles = localStyles }) => (
  <>
    <Grid.Row className={styles.container}>
      <a href={link}>
        <span
          dangerouslySetInnerHTML={{
            __html: `
            <!--[if mso]>
            <table width="100%">
              <tr>
                <td>
                  <img width="100%" src=${image}
                  alt="ad" style="text-align: right; width: 100%; border: 0;
                  text-decoration:none;
                  vertical-align: baseline;">
                </td>
              </tr>
            </table>
            <div style="display:none">
            <![endif]-->`
          }}
        />
        <Img className={styles.image} src={image} alt="ad" />
        <span
          dangerouslySetInnerHTML={{
            __html: `
            <!--[if mso]>
            </div>
            <![endif]-->
            `
          }}
        />
      </a>
    </Grid.Row>
    {hasDivider && (
      <Grid.Row>
        <Divider />
      </Grid.Row>
    )}
  </>
)

Img零件：

const Img = ({ src, alt, className, styles = localStyles, style = {} }) => {
  return (
    <img
      src={src}
      alt={alt}
      style={style}
      className={cx(styles.img, className)}
    />
  )
}

我正在为此使用“电子邮件条件”，这适用于更现代的 Outlook 版本。

标签： cssreactjshtml-email

解决方案

在 Windows 上的 Outlook（从 2007 年到 2019 年，使用 Word 的渲染引擎）中，<img>元素的百分比宽度基于图像文件的物理宽度，而不是 CSS 中应该期望的父元素的宽度。因此，如果您的图像是 100 像素宽，width="100%"则等于 100 像素。如果您的图像是 2000 像素宽，则它将等于 2000 像素。Outlook 的适当解决方案是通过 HTMLwidth属性使用以像素为单位的固定宽度，并width:100%;以内联样式（Outlook 将忽略）为其他客户端使用样式。

您将需要更新您的Img组件以包含图像的宽度并使用以下内容进行渲染：

<img width="${width}" src=${image}
                  alt="ad" style="text-align: right; width: 100%; border: 0;
                  text-decoration:none;
                  vertical-align: baseline;">

推荐阅读