移动 MJML 上的内联图像

Question

我正在尝试使用 MJML 创建电子邮件模板。我想在桌面和移动设备上创建一个内联图像。我写了这段代码：

<mj-section background-color="#bce0a6">
       <mj-column>
       </mj-column>
       <mj-column>
       </mj-column>
       <mj-column>
        <mj-image src="https://xxxx.png" alt="Twitter icon" width="24px" padding-top="5px" padding-bottom="5px"></mj-image>
       </mj-column>
       <mj-column>
        <mj-image src="https://yyyy.png" alt="Instagram icon" width="24px" padding-top="5px" padding-bottom="5px"></mj-image>
       </mj-column>
       <mj-column>
        <mj-image src="https://zzzz.png" alt="Pinteres icon" width="24px" padding-top="5px" padding-bottom="5px"></mj-image>
      </mj-column>
      <mj-column>
      </mj-column>
      <mj-column>
      </mj-column>
    </mj-section>

这是桌面版的结果：这是移动版的结果：

我想在不使用 MJML 拥有的 mj-social-element 的情况下在移动版本上制作图标图像，因为我想使用我拥有的图标图像而不是 [=11] 的图标图像=] 优惠。

我有办法吗？谢谢！

注意：在代码中，我在顶部和底部使用了 2 个空 <mj-column>，以便图标居中，但如果有其他更简洁的方法，请告诉我！

Answer 1

将它包裹在 <mj-group> 中就成功了：

    <mj-section background-color="#bce0a6">
      <mj-group>
       <mj-column>
       </mj-column>
       <mj-column>
       </mj-column>
       <mj-column>
        <mj-image src="https://xxxx.png" alt="Twitter icon" width="24px" padding-top="5px" padding-bottom="5px"></mj-image>
       </mj-column>
       <mj-column>
        <mj-image src="https://yyyy.png" alt="Instagram icon" width="24px" padding-top="5px" padding-bottom="5px"></mj-image>
       </mj-column>
       <mj-column>
        <mj-image src="https://zzzz.png" alt="Instagram icon" width="24px" padding-top="5px" padding-bottom="5px"></mj-image>
      </mj-column>
      <mj-column>
      </mj-column>
      <mj-column>
      </mj-column>
     </mj-group>
    </mj-section>

Answer 2

  <mj-social icon-padding="5px" icon-size="40px">
          <mj-social-element href="https://instagram.com" target="_blank" src="http://cdn.mcauto-images-production.sendgrid.net/02aae67d32c55468/943d32d4-61a8-4459-9091-daf7014d0769/64x64.png">
          </mj-social-element>
          <mj-social-element href="https://instagram.com" target="_blank" src="http://cdn.mcauto-images-production.sendgrid.net/02aae67d32c55468/4d5d6666-fd8c-4826-9e57-b8a70799cfba/64x64.png">
          </mj-social-element>
          <mj-social-element href="https://instagram.com" target="_blank" src="http://cdn.mcauto-images-production.sendgrid.net/02aae67d32c55468/3b59c8d5-afd9-4535-b269-fbb5d2449936/64x64.png">
          </mj-social-element>
</mj-social>

移动 MJML 上的内联图像

Inline images on mobile MJML

html

mailer

mjml