使图像替代文本在所有浏览器上看起来几乎相同

Question

使用 React，我正在处理一个电子邮件模板。该电子邮件获取我公司的徽标。我们不希望图像保存在本地或远程，所以我决定使用 base64。不幸的是，base64 不适用于所有电子邮件客户端(我正在查看您的 gmail(。 现在，我将使用带有自定义样式的替代文本(稍后我将查看带有特快邮件和节点邮件的电子邮件附件选项(。

替代文本的问题在于每个浏览器显示它略有不同。Chrome & Edge 显示损坏的图像图标，Safari、Outlook App 在替代文本周围显示边框。

我希望替代文本在所有浏览器和电子邮件客户端上看起来几乎相同

我尝试了几件事。

__

1. 我试图摆脱损坏的图像图标，在我的 img 标签中出现错误
2. 我尝试使用组件DidMount
3. 我尝试使用 object 元素来环绕 img 标签，默认情况下，当发生错误时，该标签不显示任何内容。使用对象标签，我尝试在标签中添加替代文本 ALT 文本 . 我也尝试使用伪选择器 ：：after 到对象标签

没有任何效果:(

1.

<img src="src.png" alt"Logo text here" onerror="this.style.display='none'"/>

阿拉伯数字。

componentDidMount() {
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('img').forEach(function(img){
img.onerror = function(){this.style.display='none';};
})
});
}

3.

<object data="src.png" type="image/png">
<img src="src.png" alt"Logo text here" />
</object>

3.

<object data="src.png" type="image/png">
<img src="src.png" alt"Logo text here" />
Logo text here
</object>

3.

<object data="src.png" type="image/png">
<img src="src.png" />
</object>
object::after {
content: "Logo text here";
}

什么都没用：/

我将不胜感激一些帮助，我希望我所要求的是有意义的，并且是可行的。

Answer 1

你能试试用这个css吗：

img {
font-family: "Helvetica";
font-weight: 300;
line-height: 2;
text-align: center;
width: 100%;
height: auto;
display: block;
position: relative;
}
img:after {
content: "f1c5"" " attr(alt);
font-size: 16px;
font-family: FontAwesome;
color: rgb(100, 100, 100);
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}

<img src="./test.jpg" alt="test"/>

注意：在这种情况下缺少字体真棒，您可以将其包含在内进行检查。