javascript - 如果图像 url 无效，则从 alt 文本中删除边框

Question

今天是星期五，这是一个有趣的问题(也是一个真正的问题)。我在图像周围使用边框，但如果图像 url 无效，则边框会出现在替代文本周围，看起来有点难看。如何使用 CSS 删除它？

<a href="#">
   <img src="http://badsrc.com/blah" style="border:1px solid black" alt="Remove border from this alt text" />
</a>

我不想用服务器端脚本或 jQuery 过度使用它。对 CSS 感兴趣。如果没有可用的 CSS 解决方案，则欢迎使用其他解决方案。

我实际的服务器端脚本是这样的

If Not String.IsNullOrEmpty(photoURL) Then
   photoUrl2="<img src="..." style="border:1px solid #000" alt="BMW for sale">"
end if

jsfiddle

Answer 1

可以使用onerror并设置边框

<a href="#">
 <img src="http://badsrc.com/blah" onerror="this.style.borderWidth=0" style="border:1px solid black" alt="Remove border from this alt text" />
</a>

最好不要使用内联样式而使用类

jsfiddle