移动 MJML 上的内嵌图像

发布于 2025-01-18 05:27:16 字数 1449 浏览 3 评论 0原文

我正在尝试使用 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 因为我想使用我有的图标图像，但没有图标表示 mj-social-element 提供的服务。

我有办法做到吗？谢谢！

注意：在代码中，我在顶部和底部使用了 2 个空，以便图标居中，但如果有另一种更简洁的方法，请告诉我！

原文

I am trying to create an email template using MJML. And I want to create an inline of images both on desktop and mobile. I wrote this code:

<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>

This is the result in desktop version:

This is the result in mobile version:

I want to make the icon images inline as well on the mobile version WITHOUT using the mj-social-element that MJML has since I would like to use the icon images I have and not the icon images the mj-social-element offers.

Is there a way for me to do it? Thanks!

NOTE: In the code I used so 2 empty <mj-column> in the top and bottom so that the icons are centered but if there is another cleaner way to do it please let me know!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

挽心 2025-01-25 05:27:16

  <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>

  <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>

回复收藏 0 原文

蓝天 2025-01-25 05:27:16

将其包装在＆lt; mj-group＆gt;中做到了：

    <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>

Wrapping it up in a <mj-group> did the trick:

    <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>

回复收藏 0 原文

~没有更多了~