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

Question

我正在使用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版本。

Answer 1

在Windows上的Outlook中(从2007年到2019年，使用Word的渲染引擎(，<img>元素的百分比宽度基于图像文件的物理宽度，而不是CSS中预期的父元素的宽度。因此，如果您的图像是100px宽，width="100%"将等于100px。如果你的图像是2000px宽，它将等于2000px。适用于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;">