如何在电子邮件模板中的 GMAIL 上以深色模式显示特定图像（使用显示）

Question

我有以下代码片段，其中有两个图像，一个用于浅色模式，另一个用于深色模式。媒体查询不适用于 iOS Gmail 应用程序。在 ios gmail 应用程序中应用暗模式时如何显示 .img-dark？

@media (prefers-color-scheme: dark) {
.img-dark {
      display: inline-block !important;
    }
    .img-light {
      display: none !important;
    }
}

<img
                                      class="header-logo img-light"
                                      src="https://viwell.com/wp-content/uploads/2023/10/viwell-logo.png"
                                      alt="Viwell Logo"
                                      style="width: 284px; height: 64px"
                                      width="284"
                                      height="64" /><img
                                      class="header-logo img-dark"
                                      src="https://viwell.com/wp-content/uploads/2023/10/viwell-logo-dark.png"
                                      alt="Viwell Logo"
                                      style="
                                        width: 284px;
                                        height: 64px;
                                        display: none;
                                      "
                                      width="284"
                                      height="64"
                                  />

Answer 1

Gmail iOS 应用程序不支持媒体查询。要在 Gmail iOS 应用程序中显示 .img-dark 图像，您需要使用不同的方法。

一种方法是使用 data-src 属性来存储暗模式图像的路径。然后，您可以使用 JavaScript 检查当前的查看模式并显示适当的图像。

 data-src="https://viwell.com/wp-content/uploads/2023/10/viwell-logo-dark.png"