如何使用React阻止Outlook中HTML模板中的图像不必要地扩展? [英] How to keep images in an HTML template inside Outlook from expanding unnecessarily with React?

问题描述

我正在使用React创建一个电子邮件生成器.我正在绘制表格(因为这是电子邮件所必须具有的).

I'm creating a email generator using React. I'm rendering tables (since that's what an email must have).

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

In most email browsers the email looks decent, except in Outlook which expands the images and ruins the layout.

以下是渲染图像的特定组件:

Here is the specific component that renders the images:

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版本中使用.

I'm using "email conditionals" for this which kind of works in more modern Outlook versions.

推荐答案

在Windows的Outlook中(从2007年到2019年，使用Word的呈现引擎)，< img> 元素上的百分比宽度为基于图像文件的物理宽度，而不是父元素的宽度(在CSS中应该如此).因此，如果您的图片宽度为100像素，则 width ="100％" 将等于100像素.如果您的图片宽度为2000像素，则等于2000像素.适用于Outlook的解决方案是通过HTML width 属性使用固定的像素宽度，并对内嵌样式的其他客户端使用 width:100％; 样式(Outlook会忽略它.)

In the Outlook on Windows (from 2007 to 2019, using Word's rendering engine), percentage widths on <img> elements are based on the image file’s physical width, not the parent element’s width as one should expect in CSS. So if your image is 100px wide, width="100%" will equal to 100px. And if your image is 2000px wide, it will equal 2000px. The appropriate solution for Outlook is to use a fixed width in pixels via the HTML width attribute, and use a width:100%; styles for other clients in an inline style (which Outlook will ignore).

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

You're going to need to update your Img component to include the image’s width and render it with something like this:

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

这篇关于如何使用React阻止Outlook中HTML模板中的图像不必要地扩展?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！