防止在找不到图像时旋转 img 标签的 alt 文本

Question

我transform: rotate(90deg);在我的图像上应用了CSS，但它也在旋转 ALT 文本，这会导致此文本在找不到图像时出现在其他图像上。

有什么可以防止 ALT 文本旋转的原因吗？

<div>
<img style="transform: rotate(90deg);" alt="User Name" src="http://ImageURL">
</div>

<div>
<img style="transform: rotate(90deg);" alt="User Name" src="http://ImageURL">
</div>

div { margin-top:50px; }

编辑

我在页面上有很多图片。

Answer 1

您可以使用onerror处理程序从图像中删除样式：

function onImageNotFound() {
  document.getElementById('imgTest').style.transform = 'none';
}

div { margin-top:50px; }

<div>
    <img id="imgTest" style="transform: rotate(90deg);" alt="User Name" src="http://ImageURL" onerror="onImageNotFound();">
</div>

这是一个内联版本：

div { margin-top:50px; }

<div>
    <img style="transform: rotate(90deg);" alt="User Name" src="http://ImageURL" onerror="this.style.transform = 'none';">
</div>