如何在 HTML 电子邮件中显示图像

Mia Chevalier

2024年4月20日星期六下午7:16:02

解决 Outlook 电子邮件中的图像显示问题
遇到图像未在 HTML 电子邮件中显示的问题可能会令人沮丧，尤其是当它们正确显示在实时服务器上时。这一常见问题经常出现在 Outlook 等电子邮件客户端中，其中必须正确嵌入和引用图像。确保您的图像 URL 可访问且在电子邮件 HTML 代码中格式正确对于可见性至关重要。
在所描述的情况下，尽管图像在线托管并通过其 URL 调用，但问题仍然存在。这种情况表明 Outlook 处理图像链接或其安全设置存在潜在问题，这可能会阻止图像显示。了解这些细微差别对于排除故障和纠正显示问题至关重要。

命令描述

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 指定 HTML 文档的字符编码，这对于电子邮件模板至关重要，以确保字符在各种电子邮件客户端上正确显示。

curl_init() 初始化一个新会话并返回一个 cURL 句柄，以便与 PHP 中的curl_setopt()、curl_exec() 和curl_close() 函数一起使用。

curl_setopt() 设置 cURL 会话的选项。此命令用于指定要获取的 URL 和各种其他参数，例如以字符串形式返回结果。

curl_exec() 执行 cURL 会话，获取在 curl_setopt() 函数中指定的 URL。

curl_getinfo() 获取有关特定传输的信息，此处用于检索所获取 URL 的 HTTP 状态代码以验证可访问性。

curl_close() 关闭 cURL 会话并释放所有资源。在执行所有 cURL 函数后必须关闭会话以避免内存泄漏。

命令	描述
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	指定 HTML 文档的字符编码，这对于电子邮件模板至关重要，以确保字符在各种电子邮件客户端上正确显示。
curl_init()	初始化一个新会话并返回一个 cURL 句柄，以便与 PHP 中的curl_setopt()、curl_exec() 和curl_close() 函数一起使用。
curl_setopt()	设置 cURL 会话的选项。此命令用于指定要获取的 URL 和各种其他参数，例如以字符串形式返回结果。
curl_exec()	执行 cURL 会话，获取在 curl_setopt() 函数中指定的 URL。
curl_getinfo()	获取有关特定传输的信息，此处用于检索所获取 URL 的 HTTP 状态代码以验证可访问性。
curl_close()	关闭 cURL 会话并释放所有资源。在执行所有 cURL 函数后必须关闭会话以避免内存泄漏。

了解用于电子邮件图像显示的 HTML 和 PHP 脚本

提供的 HTML 脚本专门设计用于在 HTML 电子邮件模板中嵌入图像。该脚本利用标签嵌入在线图像，确保在查看电子邮件时可以访问该图像。纳入内部分至关重要，因为它设置内容类型和字符编码，这有助于在不同的电子邮件客户端上正确显示电子邮件内容。

PHP 脚本通过使用多个 cURL 命令验证图像 URL 的可访问性，增强了电子邮件中图像显示的可靠性。命令如 , ，和共同初始化 cURL 会话，设置 URL 获取所需的选项，并分别执行会话。功能 卷曲获取信息（） 然后用于检索 HTTP 状态代码，以确认图像是否可访问。如果响应代码为 200，则表示可以通过互联网成功访问该图像。

确保 HTML 电子邮件图像在 Outlook 中显示

HTML 和 CSS 实现

<!-- HTML part of the email -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Email with Image</title>
<style>
  body, html, table {
    margin: 0px; padding: 0px; height: 100%; width: 100%;
    background-color: #5200FF;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td style="text-align: center;">
      <img src="https://d.img.vision/datafit/logoWhite.png" alt="Logo" style="max-height: 200px; max-width: 200px;">
    </td>
  </tr>
</table>
</body>
</html>

验证和修复电子邮件客户端的图像可访问性

使用 PHP 进行服务器端脚本编写

//php
// Define the image URL
$imageUrl = 'https://d.img.vision/datafit/logoWhite.png';
// Use cURL to check if the image is accessible
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $imageUrl);
curl_setopt($ch, CURLOPT_NOBODY, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_exec($ch);
$responseCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
// Check if the image is accessible
if ($responseCode == 200) {
  echo 'Image is accessible and can be embedded in emails.';
} else {
  echo 'Image is not accessible, check the URL or permissions.';
}
curl_close($ch);
//

优化电子邮件客户端之间的 HTML 电子邮件兼容性

在 HTML 电子邮件中嵌入图像时经常被忽视的一个关键方面是确保跨客户端兼容性。 Outlook、Gmail 和 Apple Mail 等电子邮件客户端可以以不同的方式解释 HTML 代码，从而导致电子邮件的显示方式存在差异。要为各种客户端优化 HTML 电子邮件，必须使用内联 CSS 并避免使用并非所有电子邮件客户端都支持的 CSS 样式。例如，某些客户端不支持外部甚至内部样式表，并且“最大宽度”等属性经常被忽略，尤其是在旧版本的 Outlook 中。

此外，建议在发送电子邮件之前在多个客户端之间测试电子邮件。 Litmus 和 Acid 上的电子邮件等工具可以跨不同设备和电子邮件客户端提供预览，确保所有元素（包括图像）正确呈现。这种主动方法有助于识别可能影响电子邮件布局或图像可见性的潜在问题，从而在最终发送之前进行调整。

为什么 Outlook 电子邮件中不显示图像？
出于安全原因，Outlook 可能会阻止来自外部来源的图像，或者可能不支持电子邮件中使用的某些 CSS 属性。
如何确保我的图像显示在所有电子邮件客户端中？
使用内联 CSS 进行样式设置，保持图像尺寸灵活，并在发送前在不同客户端上测试您的电子邮件。
HTML 电子邮件中的图像的建议尺寸是多少？
最好将电子邮件图像的宽度保持在 600 像素以下，以确保它们适合典型的电子邮件阅读窗格。
我可以在 HTML 电子邮件中使用网络字体吗？
是的，但请记住，并非所有电子邮件客户端都支持网络字体。提供后备字体以确保兼容性。
是否有必要将图像托管在安全服务器上？
是的，使用 HTTPS 托管图像有助于防止大多数电子邮件客户端中与安全性和可访问性相关的问题。

要在 HTML 电子邮件中成功嵌入图像，需要了解电子邮件客户端行为的细微差别，尤其是 Outlook 等客户端。确保图像可通过 HTTPS 访问、使用内联 CSS 进行样式设置以及使用 Litmus 或 Email on Acid 等工具预先测试电子邮件，可以显着提高图像显示的可靠性。最终，彻底的测试和遵守电子邮件设计的最佳实践对于在所有平台上实现一致的结果至关重要。