如何在HTML邮件中显示Google Drive图片？Gmail加载失败求助

问题原因 #

Gmail对外部图片加载有严格安全限制，你使用的https://drive.google.com/uc?export=view&id=XXX属于预览重定向链接，并非直接的图片资源地址，Gmail会拦截这类带跳转的链接；另外如果图片权限未设为公开，Gmail服务器也无法获取到图片内容。

解决方案 #

• 设置图片公开权限
  打开Google Drive中的目标图片，点击「分享」按钮，将权限设置为任何人，知道链接的人均可查看，确保Gmail服务器能访问该资源。

• 替换为直接可访问的图片链接
  将原img标签的src属性替换为以下两种格式之一：

  1. 指定尺寸的缩略图链接（示例为宽度600，可按需调整）：

     https://drive.google.com/thumbnail?id=1QJk7MIu-1hriNSyf1k71YyGwtQBqjy02&sz=w600
     

  2. 原始图片内容链接：

     https://lh3.googleusercontent.com/d/1QJk7MIu-1hriNSyf1k71YyGwtQBqjy02
     

• 验证链接有效性
  在匿名浏览器窗口打开新链接，确认能直接显示图片，而非跳转到Google Drive预览页面。

修改后的代码示例 #

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body style="margin: 0; padding: 0;">
    <table cellspacing="0" cellpadding="0" border="0" width="100%">
        <tr>
            <td>
                <table cellspacing="0" cellpadding="0" border="0" width="600px" align="center">
                    <tr>
                        <td>
                            <img src="https://drive.google.com/thumbnail?id=1QJk7MIu-1hriNSyf1k71YyGwtQBqjy02&sz=w600" alt="Demo_image" srcset="">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

补充说明 #

Outlook对外部链接限制相对宽松，允许跟随重定向加载图片，所以原代码在Outlook中能正常显示，但Gmail的安全机制会过滤非直接指向图片文件的链接，必须用静态图片资源地址才能被加载。

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