HTML/CSS邮件在Yahoo邮箱中图片显示异常的技术求助

伙计，我来帮你搞定Yahoo邮箱里图片不显示的问题！结合你贴的代码，这里有几个针对性的修复方案，都是踩过Yahoo邮件渲染坑的经验：

1. 清理Gmail自动插入的冗余属性 #

你代码里的class="CToWUd"、data-bit="iit"是Gmail处理邮件时自动加上的非标准属性，Yahoo的渲染引擎对这类陌生属性很敏感，会干扰图片的正常加载。直接把这些属性删掉就行。

2. 修正图片样式的兼容性 #

Yahoo对CSS的object-fit支持很差，而且!important的优先级处理也和其他邮箱不一样。另外，要把图片的宽高直接写在<img>标签上（而不是只放在style里），Yahoo有时候会忽略style里的尺寸定义。

修改前的图片标签：

<img alt="" class="CToWUd" data-bit="iit" src="https://info.hotels.ng/uploads/1662394368.PNG" style="object-fit: cover;display: block; min-width: 100%; max-width: 100%; overflow: hidden; border-radius: 8px; border-width: 0px; border-style: solid; width: 296px; height: 206px !important;" />

修改后的图片标签：

<img alt="Thor: Love and Thunder" src="https://info.hotels.ng/uploads/1662394368.PNG" width="296" height="206" style="display: block; border-radius: 8px; border: 0; width: 296px; height: 206px; max-width: 100%;" />

• 补充了有意义的alt文本（提升可访问性，图片加载失败时也能显示提示）
• 移除了object-fit、overflow: hidden、!important
• 直接在标签上声明width和height

3. 修复语法错误的CSS #

你代码里有个td标签的样式写了padding:，后面没有具体数值，这是语法错误，Yahoo的渲染引擎会因为这种错误打乱整个布局，进而影响图片加载：

<td style="background-color: white; padding:">

改成带具体值的样式，比如：

<td style="background-color: white; padding: 0;">

4. 检查图片资源的可访问性 #

Yahoo会拦截没有正确配置防盗链的外部图片，你可以：

• 确认图片服务器的防盗链规则允许Yahoo的域名访问
• 确保图片URL是HTTPS协议（Yahoo优先加载HTTPS资源，HTTP资源可能被默认屏蔽）

修复后的完整代码片段 #

<tr>
<td align="left" style="padding:30px 0 8px 0;font-family:Montserrat,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#333333;font-size:20px;line-height:26px;font-weight:bold">精选影片<br />
<span style="font-size:16px;"><em>为放松身心，我们为您准备了影片，伴您度过愉快周末。</em></span></td>
</tr>
<tr>
<td style="background-color: white; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<th align="center" valign="top" width="320">
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;max-width:100%" width="100%">
<tbody>
<tr>
<td align="left" valign="top"><a href="https://hotels.ng/hotel/26241-ibis-lagos-airport-lagos?utm_source=hng02082022&amp;utm_medium=email&amp;utm_campaign=html-deals&amp;utm_content=hi-here-are-some-safe-hotels-to-check-in-to-now?&amp;utm_term=control" style="display:block" target="_blank"><img alt="Thor: Love and Thunder" src="https://info.hotels.ng/uploads/1662394368.PNG" width="296" height="206" style="display: block; border-radius: 8px; border: 0; width: 296px; height: 206px; max-width: 100%;" />
</a></td>
</tr>
<tr>
<td align="left" style="padding:15px 0 4px 0;font-family:Montserrat,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:20px;line-height:22px;font-weight:bold;color:#333333" valign="top">Thor: Love and Thunder</td>
</tr>
<tr>
<td align="left" style="padding:0 0 0px 0;font-family:Montserrat,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:normal;color:#6b6b6b" valign="top">《Thor: Love and Thunder》是2022年美国漫威漫画改编的超级英雄电影，由漫威影业出品，是《Thor: Ragnarok》的续集，也是漫威电影宇宙的第29部作品，目前正在影院上映。</td>
</tr>
</tbody>
</table>
</th>
<td>&nbsp;</td>
<th align="center" valign="top" width="320">
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="padding-bottom: 0px; border-collapse:separate;max-width:100%" width="100%">
<tbody>
<tr>
<td align="left" valign="top"><a href="https://hotels.ng/hotel/26241-ibis-lagos-airport-lagos?utm_source=hng02082022&amp;utm_medium=email&amp;utm_campaign=html-deals&amp;utm_content=hi-here-are-some-safe-hotels-to-check-in-to-now?&amp;utm_term=control" style="display:block" target="_blank"><img alt="Beast" src="https://info.hotels.ng/uploads/1662393994.png" width="296" height="206" style="display: block; border-radius: 8px; border: 0; width: 296px; height: 206px; max-width: 100%;" />
</a></td>
</tr>
<tr>
<td align="left" style="padding:15px 0 4px 0;font-family:Montserrat,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:20px;line-height:15px;font-weight:bold;color:#333333" valign="top">Beast</td>
</tr>
<tr>
<td align="left" style="padding:0 0 0px 0;font-family:Montserrat,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:normal;color:#6b6b6b" valign="top">《Beast》是2022年美国生存惊悚片，由Baltasar Kormákur执导，Ryan Engle编剧，故事源自Jaime Primak Sullivan，主演包括Idris Elba、Iyana Halley、Leah Sava Jeffries和Sharlto Copley，目前正在影院上映。</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>

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