วิธีป้องกันไม่ให้รูปภาพในเทมเพลต HTML ภายใน Outlook ขยายด้วย 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 เวอร์ชันที่ทันสมัยกว่า