如何在SendGrid中根据替换标签动态显隐图片模块？

1. 给第二、三张图片添加条件渲染逻辑 #

SendGrid动态模板支持Handlebars语法，直接用{{#if}}判断图片SRC变量是否有值，就能实现仅当对应图片存在时才渲染模块的效果。

图片模块2修改后代码： #

{{#if ProfileImageUrl2}}
<td style="font-size:6px; line-height:10px; padding:10px 10px 10px 10px; width: 33.33%;" valign="top" align="center">
  <a href="{{ insert bookMeetingUrl2 'default=Book Meeting URL 2' }}">
    <img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;" width="186" alt="Book Meeting Url 2" data-proportionally-constrained="true" data-responsive="true" src="{{ insert ProfileImageUrl2 'default=Profile Image Url 2' }}">
  </a>
</td>
{{/if}}

图片模块3只需将变量替换为ProfileImageUrl3和bookMeetingUrl3即可。

若你的变量在无值时会返回默认占位文本（比如Profile Image Url 2），需要把条件调整为排除默认值的判断：

{{#if ne ProfileImageUrl2 'Profile Image Url 2'}}
<!-- 模块代码 -->
{{/if}}

2. 空列问题：无需改用独立块，优化表格布局即可 #

默认3列模块不会自动调整空列宽度，但通过以下设置可让剩余列自适应：

• 给表格添加width="100%"和style="table-layout: auto;"，主流邮件客户端均支持该属性，缺失列时剩余列会自动平分表格宽度。
• 每个列的宽度使用百分比（如33.33%）而非固定像素，确保自适应效果。

完整表格结构示例： #

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: auto;">
  <tr>
    <!-- 图片1：始终渲染 -->
    <td style="font-size:6px; line-height:10px; padding:10px 10px 10px 10px; width: 33.33%;" valign="top" align="center">
      <a href="{{ insert bookMeetingUrl1 'default=Book Meeting URL 1' }}">
        <img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;" width="186" alt="Book Meeting Url 1" data-proportionally-constrained="true" data-responsive="true" src="{{ insert ProfileImageUrl1 'default=Profile Image Url 1' }}">
      </a>
    </td>
    <!-- 图片2：条件渲染 -->
    {{#if ProfileImageUrl2}}
    <td style="font-size:6px; line-height:10px; padding:10px 10px 10px 10px; width: 33.33%;" valign="top" align="center">
      <a href="{{ insert bookMeetingUrl2 'default=Book Meeting URL 2' }}">
        <img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;" width="186" alt="Book Meeting Url 2" data-proportionally-constrained="true" data-responsive="true" src="{{ insert ProfileImageUrl2 'default=Profile Image Url 2' }}">
      </a>
    </td>
    {{/if}}
    <!-- 图片3：条件渲染 -->
    {{#if ProfileImageUrl3}}
    <td style="font-size:6px; line-height:10px; padding:10px 10px 10px 10px; width: 33.33%;" valign="top" align="center">
      <a href="{{ insert bookMeetingUrl3 'default=Book Meeting URL 3' }}">
        <img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;" width="186" alt="Book Meeting Url 3" data-proportionally-constrained="true" data-responsive="true" src="{{ insert ProfileImageUrl3 'default=Profile Image Url 3' }}">
      </a>
    </td>
    {{/if}}
  </tr>
</table>

额外提醒 #

• 务必在SendGrid模板预览中测试三种场景：仅1张图、2张图、3张图，确保在Gmail、Outlook等主流客户端显示正常。
• 若担心列宽过窄，可给每个td添加min-width: 186px;样式，与图片宽度对应。

内容的提问来源于stack exchange，提问作者shiloha2